1 html hypertext markup language hypertext text containing navigable links to other texts markup...
TRANSCRIPT
1
HTML
HyperText Markup Language HyperText
text containing navigable links to other texts Markup Language
a method of adding information to the text indicating the logical components of a document, or instructions for layout of the text on the page which can be interpreted by some automatic system
2
HTML Principles
Platform, device, modality independencehard to achieve in realitydifferent browser, different rendering
Human-readable text formatindependence from an editing
application Standard conformance and evolution
3
HTML Standard
What tags exist? How are the tags to be interpreted? How are the tags related to each other? How should the client respond to user
interaction with the page? Standard body is the World Wide Web
Consortium www.w3c.org
4
Versions of the standard
HTML 1.0 1993 never fully standardized
HTML 2.0 1994
HTML 3.2 1996 3.0 never released added tables, applets, text flow
HTML 4.0 1998
XHTML 1.0 current recommendation makes HTML conformant with XML
HTML versus XHTML
HTML (Hypertext Markup Language) is the markup language used to create web pages. An HTML document is read by a web browser, which displays the web page. The most recent version of HTML is 4.01.
XHTML (Extensible Hypertext Markup Language) is a stricter, cleaner version of HTML intended for use with automated document processing systems. XHTML is combination of HTML and XML (Extensible Markup Language), which is a more general markup language than HTML.
5
6
Browser Versions
Many different browser versions all support different combinations of HTML features
Current leaders Firefox IE 7 and IE 8 Netscape
• way behind Opera Safari
7
Other rendering issues
User’s monitor size resolution color depth color temperature
User preferences window size browser preference settings images off
Browser capabilities format-specific plug-ins Java version
8
Tools
Text editor editing HTML files (no WYSIWYG editors, please)
Web client / browser viewing files IE, Firefox, Safari, etc.
Web server deliver the files to users students.depaul.edu
9
Process
Write HTML fileASCII / text formatextension .html or .htm
Upload to serverpublic_html directorySet permissions
Similar with images.gif and .jpg formats
10
Terminology
Document content the parts of the file that the user sees
Tag HTML codes that control document
appearance Attributes
properties associated with a tag Entities
specially-coded characters
11
Tag syntax
Tags are case-insensitive but all lower case is recommended XHTML will require it
Tags are enclosed in angle brackets <html>
Tags typically come in pairs <title> </title>
Tags typically enclose document content <p>some text... </p>
Tags can only be nested <b> <i> some text... </i> </b> legal <b> <i> some text... </b> </i> illegal
12
Attribute syntax
Attributes are name / value pairs included in tags <body bgcolor=“black”>
Attributes never include document content may include formatting information color, size, etc.
HTML attributes do not need to be quoted But XHTML will require it
13
Tag types
Document tags identify the various parts of the document (Head,
Body) Text structure tags
determine the layout of the text (lists, paragraphs) Style tags
tell the browser how to display the text Image tags
to incorporate images Anchor tags
to create hyperlinks
14
Document tags
<html> … </html> Mark the beginning and end of the html file
<head> … </head> Text in this part of the document is not displayed in the browser’s window. It includes other tags like <title> and <meta>
<title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description.
<body> … </body> The contents displayed in the browser’s window.
15
<html><head>
<title>IT 130: The bare minimum
</title></head><body>
Welcome to the Bare Minimum Page for IT 130!</body></html>
The bare minimum
HTML Comments
The comment feature provides you with a way to document your HTML files and make notes to yourself or anyone who reads your file. However, these do not show up in the displayed web page.
Basic comment examples
<!-- This is a comment -->
<!--------- You can write as much as you like in a
comment and they can span multiple lines -------------->
16
17
Text structure tags
Headings: <hx> … </hx> for 1 x 6The smaller x the larger the text
Paragraph: <p> … </p>A blank line is inserted before the paragraph.
Line Break: <br> Ordered lists: <ol> … </ol> Unordered lists: <ul> … </ul>
The “Heading” tag An example of a ‘structure’ tag Headings: <h1> … </h1> boldest and largest
<h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> …. </h6> lightest and
smallest
18
<html><head>
<title>Spacing example</title></head><body>
<h1>Important! (This is an H1)</h1><p>Notice that we have some text in this paragraph.</p>
<h3>Spacing test (this is an H3)</h3><p>Here I am spacing thingswidely.
It does not make a difference.
I just left two lines blank, but I am still here!</p>One line<br>Second line<br><p>Another paragraph!</p>
</body> </html>
Spacing example
spacing-example.html
20
Character Entities
Code name Code Symbol
< < <
> > >
& & &
© © ©
® ® ®
    Non-breaking space
@ @
· ●
21
Unordered lists
An unordered (or bullet) list uses the tag pair <ul> … </ul>
Each item in the list is preceded by a single list item tag <li> It produces an indented list with a browser-supplied character in
front of it (a small circle or a square) You can specify the type of symbol used by using the TYPE attribute
<ul type=“disc”> <li>item 1 </li>
<li>item 2 </li>
</ul>
Other possible types are:square or circle
<html><head>
<title></title></head><body>
<h1>Here is an example of a list</h1>
<ul><li>First item </li><li>Second item </li>
</ul><ul type=“square”>
<li>Third item </li><li>Fourth item </li>
</ul>
</body></html>
Example
•First item
•Second item
Third item
Fourth item
23
Ordered lists
An ordered list uses the tag pair <ol>… </ol>
Each item in the list is preceded by a single list item tag <li>
1. This also produces an indented list but the items are ordered.
2. The default is to order by numbers (like this)
Example <html>
<head>
<title> …. </title>
</head>
<body>
<h1>Here is an example of a ordered list </h1>
<ol>
<li>First item </li>
<li>Second item </li>
</ol>
</body>
</html>
1. First item
2. Second item
25
Nested lists
Both ordered and unordered lists can be nested
This is done by starting a new list before the current list has ended
There is no limit to the number of levels of nesting
Use indenting in the source code to distinguish between each level of nesting
26
TYPE can change the type of numbering used ina list. TYPE = “I” Uppercase Roman
numerals TYPE = “i” Lowercase Roman numerals TYPE = “A” Uppercase Latin letters TYPE = “a” Lowercase Latin letters
START can change where the lists begins thenumbering. START = “3” Starts from 3 instead of
1 START = “b” Starts from b instead of
a
Attributes for ordered lists
<html><head><title>HTML List Example</title></head><body><h1>To do list</h1>
<ol type =“A” ><li>Pick up dry cleaning<li>Clean the house
<ul> <li>Sweep the floors </li> <li>Take out garbage </li> <li>Clean kitchen </li></ul>
<li>Stop by post office<ul> <li>Get stamps
<ul> <li>Overseas airmail </li> <li>Domestic </li></ul>
<li>Mail package </li></ul>
</ol> </body></html>
List example
list-example.html
28
Other structure tags
definition lists <dl> never really caught on
blockquote <blockquote> Indents with using a list supposedly for extended quotations often used for spacing
preformatted text <pre></pre> no HTML formatting performed
Logical style tags
Logical style tags describe the text content and let the browser choose the rendering. These are “good” tags.
Emphasis <em> </em> usually rendered as italic
Strong <strong> </strong> usually rendered as bold
Code <code> </code> monospaced font
Others
29
Display style tagsDisplay style tags that specify the rendering directly. These
are “bad” (deprecated) tags. Italic
<i> </i> Bold
<b> </b> Font
<font> </font> Center
<center> </center> Underlined
<u> </u>
Just because tags work, doesn’t mean that it’s okay to use them. Certain tags have been deprecated which means that they are being phased out of the HTML standard. Later on in the course when we learn about CSS, we will stop using deprecated tags.
30
Which tags to useAn HTML tag or attribute is said to be deprecated if it is the
current version of HTML but will be eliminated from future versions of HTML.
There are numerous deprecated out there. So though they are still technically part of HTML, their use is discouraged when writing new web pages. In this course we are going to avoid using depracated tags whenever possible.
The BEST way to find out which tag to use is via a reliable reference. A great way to start is at: http://www.w3schools.com (Bookmark this web page on your computer).
31
Style example<html><head><title>Style example</title></head><body><p><center> <font color="red">Red text, centered</font></center></p><p align="center"><b>Bold text, centered also</b></p><p><font color="blue" size="+1" face="Arial,Helvetica,sans-serif"> Blue text, larger, in a sans-serif font</font></p><p>Preformatted Text:</p><pre>I can use space however I want:
X O X O X O X O O
<b><i>X Wins!</i></b>
</pre><p>Back to normal.</p></body></html>
style-example.html
Horizontal line
The tag for creating a horizontal line is <hr />.
You can use horizontal lines to improve the appearance of your web page and to delineate sections.
There are several available attributes most of which are deprecated. However, we’ll make use of them until we learn to get around them using CSS.
W3 Schools on the <hr> tag
33
Horizontal lineOlder (deprecated) attributes include:
align specifies the line’s horizontal alignment on the page (center, left, or right)
size specifies the line’s height in pixels or percentage of the screen width
width indicates the line’s width in either pixels or percentage of the screen width
color indicates the line’s color noshade specifies that the browser display a solid line
34
Horizontal line styles - DEPRECATED
35
size=12width=100%
size=6width=50%
size=3width=25%
size=1width=10%
<hr align=“center” size=“12” width=“100%” />
<hr align=“center” size=“6” width=“50%” />
<hr align=“center” size=“3” width=“25%” />
<hr align=“center” size=“1” width=“10%” />
Because these attributes are deprected, you should not use them. I am showing you this slide only to give you a sense of the kinds of visual effects that can be achieved. You will see that the same effects can be achieved using CSS.
Quick review of end tags:
In old HTML, <hr> was the tag for horizontal lines. No closing tag was needed.
In XHTML, <hr> must be written with its closing tag </hr>. But no one wants to write two tags instead of one tag.
In XHTML, <hr /> is the shorthand version of <hr></hr>.
Similarly, <br /> is the shorthand version of <br></br>.
36
37
Anchor tag (Hyperlinks)
<a> … </a> Used to create hyperlinks to other documents in the same Web site to different locations in the same document. to external Web sites
The attribute HREF indicates the destination of the link.
<a href= “url" > Clickable text </a>
38
Link to external Web pages
<a href="http://www.cdm.depaul.edu">CDM Web Site</a>
To force a document to appear in a new window, use the target attribute
<a href=" http://www.cs.depaul.edu" target="new_window"> CDM Web Site </a>
link-example.html
39
Relative URLs
Full URL http://maya.cs.depaul.edu/~classes/it130/assign2.html
Can be abbreviated in a link<a href=“assign2.html">
The rest of the URL is filled infrom the URL of the current page
40
Relative paths
What if the destination is not in the same directory as the source We can use Unix path syntax for navigation
Elements /
• go back up to the very top foo/
• go down to a child directory named "foo" ..
• go up to the parent directory
<a href=“it130/hw2.html”>
<a href=“../main.html”>
<a href=“../images/hw/hw2.jpg”>
Relative paths
public_html
hw2.html
“it130” Directory
main.html
“images” directory
hw2.jpg
Link main.html to hw2.html:
Link hw2.html to hw2.jpg:
Link hw2.htm to main.html:
hw
file1.html
42
Structure
Your local directory structurewhere you are writing your web pages
Must match the structure on the servercontents of public_html directory
Otherwiselinks will work when you test locallybut not after being uploaded
43
The anchor tag and the HREF attribute can be usedto reference the e-mail protocol.
In general this looks like:
<a href = “mailto:e-mail address” >name</a>
Example:
To make an appointment contact:<a href = “mailto:[email protected]”>Bamshad
Mobasher</A>.
Mailto hyperlinks
link-example2.html
44
Inserting a Graphic
Images can be displayed in two ways: as inline images or as external images. an inline image displays directly on the Web page and is
displayed when the page is accessed by a user an inline image can be placed on a separate line in your
HTML code, or it can be placed directly within a line of text inline images should be in one of several file formats. Most common
• GIF (Graphics Interchange Format)• JPEG (Joint Photographic Experts Group)• PNG (Portable Net Graphics)
45
Inserting a Graphic Continued
an external image is not displayed with the Web page, the browser must have a file viewer, which is a separate program that the browser launches when it encounters an external image file
external images are represented by an icon that a user clicks to view the image
external images are only limited by applications available at the client
46
Image file formats
GIF (Graphic Interchange Format) To display clip art containing < 256 colors To create animated graphics To use transparent colors
JPG (Joint Photographic Expert Group) To display photographs To use images containing >256 colors To reduce the size of the image through file compression
PNG (Portable Net Graphics) A replacement for GIF Compressed More color depth transparency
47
Image tag
Inline image: a picture file that is referenced in the HTML code and is loaded with the HTML file.
<img src ="photo.jpg"> src attribute
URL is usually relative
If you want to retrieve an image from a different directory, you can add path information to the file name:
<img src=“images/photo.jpg”>
48
More image tag attributes
HEIGHT: specifies the height of the image in pixels WIDTH: specifies the width of the image in pixels
BORDER: determines the size of the border ALT: specifies the text displayed on-screen when the image
cannot be loaded ALIGN: enables text to flow around the image: at the TOP,
MIDDLE, or BOTTOM of the image. Also used to flush the image to the RIGHT or LEFT of the screen
Alignment of images – DEPRECATED in favor of CSS…
To insert an image:<img src="myImage.gif" />
To right-align an image:<img src="myImage.gif" align="right" />
Note: The align attribute is deprecated.
To left-align an image:<img src="myImage.gif" align="left" />
Again, we will NOT be using the align attribute as this has been deprecated in favor of CSS.
49
50
Flowing Text
Use the align attribute to make text flow alongside an image:
<img src=“cat.jpg” align=“left”>
positions the image on the left side of the page and allows text to run down its right side
To center an image, use <p align=“center”><img src=“…”></p>
51
Image example<html><head></head><body><h1 align="center"> Martin Luther King, Jr. </h1><p> <img src="mlk.gif" align="right“ width=“336”
height=“400”>I have a dream that one day this nation will rise up and live out
the true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal." …… I have a dream today. </p>
<p> I have a dream that one day the state of Alabama, whose governor's lips are presently dripping with the words of interposition and nullification, will be transformed into a …..</p>
…………</body></html>
image-example.html
52
Bandwidth
Image files are larger text files Use more network resources (bandwidth)
Users who access the Internet via telephone lines will have to wait for image files estimate 7K / sec or less
Use image files no larger than 30-40KB especially on heavily used pages
Use "alt" text to describe images for users with image loading turned off
53
Battling Bandwidth Limitations
Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading. TIP: To find an image dimension: open it using a Web browser,
then select Properties on the File Menu.
Don’t put large images at the top of a Web page Use interlaced GIFs and progressive JPGs. Use thumbnails – reduced versions of your image
54
Image links
Anchors can be used to hyperlink images instead of text.<a href=“URL”><img src=“photo.jpg” alt=“My photo”></a>
Whenever the mouse enters the clickable region, it will display the contents of the ALT attribute.