web page creation part i - kent state...
TRANSCRIPT
![Page 1: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/1.jpg)
Web Page Creation Part I
CS27101 Introduction to Web Interface Design
Prof. Angela Guercio
![Page 2: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/2.jpg)
Objective
In this lecture, you will learn:
What HTML is and what XHTML is
How to create an (X)HTML file
The (X)HTML syntax
more syntax in next lecture
You will experiment (X)HTML and apply the concepts hands on.
![Page 3: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/3.jpg)
Let’s answer a few questions… What is HTML?
Hyper Text MarkUp Language A language to describe the formatting
and the layout of content of your web page.
What is XHTML?
XHTML (Extensible Hypertext Markup Language) An extension of HTML
Standards available at World Wide
Web Consortium (W3C)
![Page 4: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/4.jpg)
Time for your first hands on! Goal: Observe a simple text file. Activity: Create a .txt file, save it with the .htm or .html
extension and open it with a web browser.
1. Open Notepad (Start Program Accessory…) 2. Now close the dialog box, go to File, Edit with Notepad and
continue editing 3. In the file write your name and postal address in the same
way you would do on an envelope. 4. In File Name save as “Myaddress.html” in any folder you
like 5. Go to the folder where you saved your file and double click
on the icon of your file. It will be open with your default browser. What do you see?
6. Go back to your file and change the address with the school address. Save (CTRL S)
7. Do you see any change in the page? Reload the page. Do you see the changes now?
![Page 5: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/5.jpg)
Web Page Creation
Create a document by using a mark-up language HTML or XHTML
Web Browsers show ASCII text
files, i.e. *.txt = text file *.html or *.htm = HTML files
Software is available to facilitate the Web page creation.
![Page 6: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/6.jpg)
Web Browser
Web browser display Web pages make any effort to display on the best
way for laptop with smaller screen text is
rearranged formatting from text files is not preserved
(e.g. break lines are gone!).
Web browsers dynamically rework the files to fill the display window as best as it can
Web browsers rework each page for each visitor
![Page 7: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/7.jpg)
What do I need to start? Do I need to be online while creating
my page? No, you can be offline You need to be online only when you
publish the page
Which Software do I need? A text editor
NotePad or A Friendly Web Editor is available in old
browsers like Netscape and SeaMonkey or Dreamweaver or Any other web editor, i.e.
FrontPage (not supported anymore) SeaMonkey, (the successor of Netscape) etc.
![Page 8: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/8.jpg)
Web Page: Basic Since Web browsers read text
files we can get a text file and display it the Web browser.
A Web server is not needed during page design you can be offline It is needed only at publication
time
![Page 9: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/9.jpg)
HTML
HTML HyperText Markup Language is a language
that gives the author control over the web browser
set of HTML elements or tags insert a HTML element to add to a content or
a style to a Web page
Instructions are issued through a series of TAGS - which are shown in <brackets>
Basic HTML Elements HTML, HEAD, TITLE, BODY
![Page 10: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/10.jpg)
Editing HTML files
Use Notepad (Windows) or SimpleText (Mac) for now. do not use Word
Word file saved as HTML invoke a HTML Converter which is not what you want when you are writing HTML files!
or save it “Text Only with Line Breaks”
If you prefer a more friendly web
editor, use Dreamweaver, Frontpage, Netscape Composer, SeaMonkey Composer, ect.
![Page 11: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/11.jpg)
TAGS
<html>……..</html> They can be nested inside other tag pairs <HTML> contains everything the browser need
to know about the Web Page
<head> …… </head> contains information not shown in the browser’s
Web page display
<title> …… </title> contains the title element that appears in the
browser window’s title bar
<body> …… </body> Contains the text and the graphics to display
![Page 12: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/12.jpg)
Tags details Tags are NOT case sensitive: <TITLE> and
<title> are the same
MOST tags start with the command and end with a slash(/) ie. <TITLE> ……. </TITLE> However there are a few tags that do not require to
be terminated <br />
Break – new line <HR />
Horizontal Row – next line/page
Spacing the content inside a TAG is important, spacing outside of the TAG’s is NOT important
![Page 13: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/13.jpg)
Time for more Practice TO DO: 1. Create a file with Notepad 2. Insert the tags in the following way <HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> This is only a test! </BODY> </HTML> 1. Save the file as FirstPage.html 2. Open the page with a Web browser
1. Where does the text in the Title appear? 2. Where does the text in the Body appear?
![Page 14: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/14.jpg)
Web Page Development Cycle 1. Save your file with the Save
command 2. Reload the new file 3. Review the new Web page
with you Web browser 4. Revise you page as needed
Repeat 1-4
![Page 15: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/15.jpg)
Old free web editors - Instructions for Netscape and SeaMonkey
1. Open Netscape 7.2 (or SeaMonkey)
2. Click on FileNewComposer Page.
3. Click on Source Code (on the bottom of the page)
4. Paste the content of the previous HTML file
5. Save it 6. Click on Browse to Preview your
file
![Page 16: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/16.jpg)
Web Page Development Cycle 1. Modify the file 2. Save it 3. Reload the page in your web browser,
ex. Click on Browse to reload the file with
Seamonkey Click on Live View to see the live page in
Dreamweaver 4. If you desire to change something go
back to the file and restart step 1.
Keep performing this cycle until your page is ready to be made public.
![Page 17: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/17.jpg)
Formatting Tags: Heading
Heading element (do not confuse with HEAD!) are used for a title inside the body of the Web page
6-sizes <H1> very large </H1> <H6> very small </H6>
![Page 18: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/18.jpg)
Formatting: Heading (cont.)
The alternative to heading is the tag <big> and <small> More convenient You can add more than one <big> or
<small> in line. You will be limited by the display ability of
the browser.
![Page 19: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/19.jpg)
Attributes
Attributes can be added to elements
Attributes go INSIDE the angle brackets!
A few examples of attributes
align is used to justify bgcolor used to indicate the
background color border used in tables ect.
![Page 20: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/20.jpg)
Formatting Tags: Align
Align is used to justify Left, right, center
Example:
<h1 align=center> very large </h1> <h6 align=right> very small </h6>
![Page 21: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/21.jpg)
Styles
Tags: <STRONG>..</STRONG>
General for Bold text
<EM>..</EM> General for Italic text
<U> …</U>
General for underlined text
![Page 22: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/22.jpg)
More tags: Paragraph
<P>…</P> breaks the text into blocks of text
set off by blank lines no indentation
Remember: Title and paragraphs add clarity to
the Web page and make it easier to read.
![Page 23: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/23.jpg)
Tags: Lists Bulleted lists
<UL> ..</UL> unordered list
Enumerated list <OL> .. </OL> ordered list
Each item in the list is marked with tags <LI>..</LI>
</UL>, </LI>, and </OL> are optional but use it
anyway Ordered lists of books
<ol> <li> book 1 <li> book 2 </ol> 1. book 1 2. book 2
Unordered lists of books <ul> <li> book 1 <li> book 2 </ul> •book 1 •book 2
![Page 24: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/24.jpg)
Fonts
Different computers have different fonts. What font will the Web browser will
choose if your font is not available? Tag: <FONT>
Attribute FACE Sans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, Times Monospaced fonts: Courier New, Courier
Pick a selection: <FONT FACE = “Arial, Geneva, Helvetica”> The browser will choose the first available.
![Page 25: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/25.jpg)
Fonts
Tag: <font>… </font> Attribute FACE Sans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, Times Monospaced fonts: Courier New, Courier
Pick a selection:
Example <font face= “Arial, Geneva, Helvetica”>
The browser will choose the first available.
![Page 26: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/26.jpg)
Fonts Attributes
COLOR=“the color” for Color setting
SIZE=+2
for the change of the current size
Example <font color = “Orange” size = 6> Hello! </font>
will display Hello!
Size chart Size 1 = 8pts Size 2 = 10pts Size 3 = 12pts Size 4 = 14pts Size 5 = 18pts Size 6 = 24pts Size 7 = 36pts
![Page 27: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/27.jpg)
Blanks, Comments, etc.
Insert blanks lines or extra white space characters in the code Do you see the line or the space on the
webpage?
  inserts a white space
<!-- comment here -->
for comments
<br /> inserts line breaks
<hr />
draws an horizontal line
![Page 28: Web Page Creation Part I - Kent State Universitypersonal.kent.edu/~aguercio/CS27101Slides/WID_Lect03_HTML_I.pdf · Web Browser Web browser display Web pages make any effort to display](https://reader030.vdocument.in/reader030/viewer/2022041002/5ea3c3d0ef017458067f2dc2/html5/thumbnails/28.jpg)
More next time…