Scribd
Upload
2 views32 pages

01 HTML

The document is a lecture on HTML, covering the basics of the World Wide Web, how browsers fetch and display web pages, and the structure of HTML documents. It explains HTML tags, text formatting, lists, links, images, tables, and frames, along with examples and attributes. Additionally, it introduces concepts like DHTML and provides vocabulary definitions related to web development.

Uploaded by

randa19112013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views32 pages

01 HTML

The document is a lecture on HTML, covering the basics of the World Wide Web, how browsers fetch and display web pages, and the structure of HTML documents. It explains HTML tags, text formatting, lists, links, images, tables, and frames, along with examples and attributes. Additionally, it introduces concepts like DHTML and provides vocabulary definitions related to web development.

Uploaded by

randa19112013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Lecture 1: HTML

Ouissem Ben Fredj


[email protected]
http://lms.tu.edu.sa/
502261-3 – Web Systems

Taif University
College of Computers and Information Technology
What is the World Wide Web?
● The World Wide Web (WWW) is most often called the
Web
● The Web is a network of computers all over the world
● All the computers in the Web can communicate with
each other.
● All the computers use a communication standard called
HTTP (Hypertext Transfer Protocol)
How does the WWW work?
● Web information is stored in documents called Web pages
● Web pages are text files stored on computers called Web
servers
● Computers reading the Web pages are called Web clients
● Web clients view the pages with a program called a Web
browser
● Popular browsers are: Internet Explorer, Firefox, Safari,
Camillo, Mozilla, Konqueror, and Opera
● Other browsers are: Netscape Navigator, Omniweb, iCab,
etc.
How does the browser fetch pages?
● A browser fetches a Web page from a server by sending
a request
● A request is a standard HTTP request containing a page
address
● A page address looks like this:
http://www.someone.com/fol1/fol11/page.html
● A page address is a kind of URL (Uniform Resource
Locator)
How does the browser display pages?
● All Web pages are ordinary text files
● All Web pages contain display instructions
● The browser displays the page by reading these
instructions.
● The most common display instructions are called
HTML tags
● HTML tags look like this:
<p>This is a Paragraph</p>
Who makes the Web standards?
● The Web standards are not made up by Microsoft,
or even Netscape
● The rule-making body of the Web is the W3C
● W3C stands for the World Wide Web Consortium
● W3C puts together specifications for Web standards
● The most essential Web standards are HTML, CSS and
XML
● The latest HTML standard is XHTML 1.1
What is an HTML File?
● HTML stands for Hypertext Markup Language
● An HTML file is a text file containing small markup tags
● The markup tags tell the Web browser how to display the page
● An HTML file must have an htm or html file extension
● .html is preferred
● An HTML file can be created using a simple text editor
(notepad++ for example)
● Formatted text, such as Microsoft Word’s .doc files, cannot be used in
HTML files
Structure of an HTML document
● An HTML document is • Hence, a fairly minimal
contained within <html> tags HTML document looks like
● It consists of a <head> and a this: Start tag
<body>, in that order
<html>
● The <head> typically contains Tag value
a <title>, which is used as the <head>
title of the browser window <title>My Title</title>
● Almost all other content goes in </head>
the <body> <body>
● Is better to write tags in Hello, World! End tag
lower case </body>
</html>
HTML documents are trees

html

head body

title
This will be the world’s best
web page, so please check
My Web Page
back soon!
(Under construction)
Text in HTML
● Anything in the body of an HTML document, unless marked
otherwise, is text
● Text highlighting:
● Emphasize a text: <em>, bowsers usually display emphasis with italics
● strong emphasize : <strong>, browsers usually display strong emphasis
with boldface
● Headers with <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags (and
the corresponding end tag, </h1> through </h6>)
● <h1> is quite large; <h6> is very small
● Each header goes on a line by itself
Whitespace
● Whitespace is any non-printing characters (space, tab, newline,
and a few others)
● HTML treats all whitespace as word separators, and
automatically flows text from one line to the next, depending on
the width of the page
● To group text into paragraphs: <p>
● Preformatted text: <pre>
● <pre> also uses a monospace font
● <pre> is handy for displaying programs
Lists
● Two of the kinds of lists in ● Example:
HTML are ordered, <ol> to The four main food
</ol>, and unordered, <ul> groups are:
to </ul> <ul>
● Ordered lists typically use <li>Sugar</li>
numbers: 1, 2, 3, ... <li>Chips</li>
● Unordered lists typically use <li>Caffeine</li>
bullets (•) <li>Chocolate</li>
</ul>
● The elements of a list (either
kind) are surrounded by <li>
and </li> (list item)
List Attributes
● Some markup tags may contain attributes of the form
name="value" to provide additional information
● Example: To have an ordered list with letters A, B, C, ...
instead of numbers, use <ol type="A"> to </ol>
● For lowercase letters, use type="a"
● For Roman numerals, use type="I"
● For lowercase Roman numerals, use type="i"
● In this example, type is an attribute
Links
● To link to another page, enclose the link text in
<a href="URL"> to </a>
● Example: I'm taking <a href =
"http://cit.tu.edu.sa/moodle">Moodle courses</a> this
semester.
● Link text will automatically be underlined and blue (or purple if
recently visited)
● To link to another part of the same page,
● Insert a named anchor: <a id="refs">References</a>
● And link to it with: <a href="#refs">My references</a>
● To link to a named anchor from a different page, use
<a href="PageURL#refs">My references</a>
Images
● Images (pictures) are not part of an HTML page; the HTML
just tells where to find the image
● To add an image to a page, use:
<img src="URL" alt="text description" width="150" height="100">
● The src attribute is required; the others are optional
● Attributes may be in any order
● The URL may refer to any .gif, .jpg, or .png file
● Other graphic formats are not recognized
● The alt attribute provides a text representation of the image if the
actual image is not downloaded
● The height and width attributes, if included, will improve the
display as the page is being downloaded
● If height or width is incorrect, the image will be distorted
● There is no </img> end tag, because <img> is not a container
Tables
● Tables are used to organize information in two dimensions (rows
and columns)
● A <table> contains one or more table rows, <tr>
● Each table row contains one or more table data cells, <td>, or
table header cells, <th>
● The difference between <td> and <th> cells is just formatting--text in
<th> cells is boldface and centered
● Each table row should contain the same number of table cells
● To put borders around every cell, add the attribute border="1" to
the <table> start tag
Example table

<table border="1">
<tr>
<th>Name</th> <th>Phone</th>
</tr>
<tr>
<td>Dick</td> <td>555-1234</td>
</tr>
<tr>
<td>Jane</td> <td>555-2345</td>
</tr>
<tr>
<td>Sally</td> <td>555-3456</td>
</tr>
</table>
More about tables
More about tables
● Tables, with or without borders, are excellent for arranging things
in rows and columns
● Wider borders can be set with border="n"
● Text in cells is less crowded if you add the attribute cellpadding="n" to
the <table> start tag
● width: assign the width of table, tr, or td
● align="left|right|center|justify|char": horizontal alignment of the content
● valign="top|middle|bottom|baseline": vertical alignment of the content
● Tables can be nested within tables, to any (reasonable) depth
● table, row, or td background color: bgcolor="color"
● Columns have to be colored one cell at a time
● You can also add bgcolor="color" to the <body> start tag
● <caption>: first element after <table>, it centers the caption
above the table
Span of columns and rows
● COLSPAN
● COLSPAN Sets the number of columns this cell will occupy.
<TABLE BORDER=1>
<TR><TH COLSPAN=“2”>Col 1&2 Heading</TH>
<TH>Col3 Heading</TH>
</TR>
<TR><TD>Col1 Data</TD>
<TD>Col2 Data</TD>
<TD>Col3 Data</TD>
</TABLE>

ROWSPAN
●

● ROWSPAN Sets the number of rows this cell will occupy.


Tables: example

10px

HTML code:
Entities
● Certain characters, such as <, have special meaning in HTML
● To put these characters into HTML without any special meaning,
we have to use entities
● Here are some of the most common entities:
● &lt; represents <
● &gt; represents >
● &amp; represents &
● &apos; represents '
● &quot; represents “
● &copy; represents ©
● &nbsp; represents a “nonbreaking space”--one that HTML does not treat
as whitespace
Frames
● Frames are a way of breaking a window up into “panes”
and putting a separate HTML page into each pane
● Pro: reusable code
● Cons: unsupported by some browsers and crawlers
● The Java API is an example of a good use of frames
Framesets
● Frames are enclosed within a frameset
● Replace <body>...</body> with <frameset>...
</frameset>
● Within the <frameset> start tag, use the attributes:
● rows=row_height_value_list
● cols=col_width_value_list
● The value lists are comma-separated lists of values, where a
value is any of:
● value% – that percent of the height or width
● value – that height or width in pixels (usually a bad idea)
● * – everything left over (use only once)
● Example: <frameset cols="20%,80%">
Adding frames to a frameset
● Put as many <frame> tags within a <frameset> as
there are rows or columns
● Each <frame> should have this attribute:
● src=URL – tells what page to load
● Some optional tags include:
● scrolling="yes|no|auto" (default is "auto")
● noresize
● name: name of frame for link targeting
● frameborder = "1|0"
● marginwidth = pixels, marginheight = pixels
● Within a <frameset> you can put <noframes>Text to
display if no frames</noframes>
Example: The Java API

<HTML>
<HEAD>
<TITLE>Java 2 Platform SE v1.4.0</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAMESET rows="30%,70%">
<FRAME src="overview-frame.html" name="packageListFrame">
<FRAME src="allclasses-frame.html" name="packageFrame">
</FRAMESET>
<FRAME src="overview-summary.html" name="classFrame">
</FRAMESET>
<NOFRAMES>
<H2>If you see this, you have frames turned off!</H2>
</NOFRAMES>
</HTML>
Return to links
● <a target="_blank|_self|_parent|_top|framename">
● target attribute values:
● _blank: Load in a new window
● _self: Load in the same frame as it was clicked
● _parent: Load in the parent frameset
● _top: Load in the full body of the window
● framename: Load in a named frame
The rest of HTML
● HTML is a large markup language, with a lot of options
● None of it is really complicated
● I’ve covered only enough to get you started
● You should study one or more of the tutorials
● The w3schools tutorial is among the best
● Your browser’s View -> Source command is a great way to
see how things are done in HTML
DHTML
● HTML sometimes has other things mixed in
● There is no such “thing” as DHTML (Dynamic
HTML)--it’s a marketing term
● DHTML is simply HTML with several other technologies
mixed in, mostly forms, CSS, and JavaScript, all of which we
will cover
● DHTML has gotten a bad reputation because browsers were
so incompatible, but that’s mostly fixed now
● If something on an HTML page doesn’t look like HTML, it
probably isn’t--so don’t worry about it for now
Vocabulary
● WWW: World Wide Web
● W3C: World Wide Web Consortium
● HTML: Hypertext Markup Language
● URL: Uniform Resource Locator

You might also like