Download presentation
Presentation is loading. Please wait.
1
Basic HTML Workshop LIS Web Team Fall 2006
2
What is HTML? Stands for Hyper Text Markup Language Computer language used to create web pages HTML file = text file containing markup tags such HTML file = text file containing markup tags such Tags tell Web browser how to display a page Can have either *.htm or *.html file extension
3
HTML Elements Tags surrounded by angle brackets Tags surrounded by angle brackets Usually come in pairs Start tag eg. and end tag Start tag eg. and end tag Stuff between is called “element content” Tags are not case sensitive New standard is to use lower case New standard is to use lower case
4
XHTML Lower case for tags = new standard Preparing for next generation of HTML called XHTML
5
Your created HTML document <html> …document title… …document title… …your page content… …your page content… </html>
6
Page Components First line of code First line of code Declaration of version of HTML Declaration of version of HTML<html>…</html> Container for the document Container for the document<head>…</head> Title of page Title of page <body>…</body> Content of page Content of page <html> …document title… …document title… …your page content… …your page content… </html>
7
Basic Tags Headings … to … … to … Paragraph … … Inserts a line space before and after a paragraph Inserts a line space before and after a paragraph
8
Image Source Tag Empty tag – no closing tag Document-relative link url = points to location of the image “pic.gif”“/images/pic.gif” alt – describes image for screen readers
9
Division Tag <div>…</div> Division or section of document Division or section of document Use to group elements to apply formatting or style Use to group elements to apply formatting or style Example: all text within div tag will be green Example: all text within div tag will be green Title of section Title of section bla bla bla bla bla bla bla bla </div>
10
Link Tag Link Anchor tag Anchor tag 2 kinds 2 kinds Link to another web page. Use href attribute Text to be displayed Text to be displayed Create a bookmark inside a page by using name attribute Top of page Top of page Link to mail message Link to mail message write out your email address again or some descriptive text write out your email address again or some descriptive text mailto:your email addressmailto:your email address
11
Exercise Create 3 divs Add in some links Add a paragraph Add an email link Add an external page link Add in an image
12
<html><head> Caitlin’s Page Caitlin’s Page </head><body> Home Home Courses Courses Personal Personal Hello my name is Caitlin Nelson and I am writing about myself. Contact info: Hello my name is Caitlin Nelson and I am writing about myself. Contact info: cnelson@hawaii.edu cnelson@hawaii.edu </p> Web Team Web Team <div> </div> </body></html>
13
Next Mission Choose colors for your page Text color Text color Link color Link color Background color Background color Choose font size Type of font Type of font Font size Font size
14
End Product <html><head> Caitlin’s Page Caitlin’s Page </head><body> Home Home Courses Courses Personal Personal Hello my name is Caitlin Nelson and I am writing about myself. Contact info: Hello my name is Caitlin Nelson and I am writing about myself. Contact info: cnelson@hawaii.edu cnelson@hawaii.edu </p> Web Team Web Team <div> </div> </body></html>
Similar presentations
