Post on 18-Jan-2016
HTML Introduction
Lecture 7
What we will cover…
Understanding the first html code… Tags
o two-sided tagso one-sided tags
Block level elementso paragraphso headingso block quoteo lists
inline elements empty elements
2
First HTML code
<html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html>
We will start with this simple code.
3Lecture 7
First HTML code
Complete html document
Body of the html document
Title of the html document
4Lecture 7
Lecture 7
Tags
HTML document o Consists of tags
Tags - core building block of HTMLo marks the presence of an elemento marks the “start” and “end” of an elemento Two-sided tags vs. single-sided tags
General syntax for two-sided tags<tag> content </tag>
Opening tag Closing tag
<html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body></html>
5
Lecture 7
More about tags
special terms surrounded by angle brackets
can be upper, lower or mixed case<TITLE> Math 279 </TITLE><title> Math 279 </title><TitLe> Math 279 </tiTlE>are all ok
most tags come in pairs, some don’t
6
Lecture 7
HTML tags
<HTML> … </HTML>o tells browser that file contains HTML-coded
information
o Anything between these two tags makes up the document content, including all other elements, text, and comments
7
The Structure of an HTML File
An HTML document is divided into two main elements: the head and the body
head element contains info about the document, for example, the document title or the keywords
<HEAD> … </HEAD> represents the head tags
The content of the head element is not displayed within the Web page
Lecture 7 8
Lecture 7
Title tags
<TITLE> … </TITLE>o used inside <HEAD> … </HEAD>
o identify document titleo displayed in the title bar at top of browser
windowo identifies your page for search engines
9
Body tags
<BODY> … </BODY> o start and end the actual contents (body)
The body element contains all of the content to appear on the Web page
HTML, HEAD, TITLE and BODY are four most basic tags in any html document
Lecture 7 10
Adding Comments – special tag
The comment tag adds notes to your HTML code
<!-- comment -->
Comments can be spread over several lines Comments are useful in documenting your HTML
code for yourself and others
Lecture 7 11
(1) Do it yourself!
Add the texts as comments to the first html codeo Author: Firstname Lastnameo Last modified Date: Feb 22, 2010
Lecture 7 12
<html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body></html>
Block-Level Elements Block-level elements - distinct blocks within the body Enhance
o Readabilityo Presentation of the web page
Similar to a technical documento Document title, section title, section text, paragraphs etc.
Most generic and popularo Paragraphso Headings
Lecture 7 13
Lecture 7
Paragraphs and Headings
Paragraphso <P>…</P>
Headingso <H1>…</H1>, <H2>…</H2>, …,
<H6>…</H6> o six levels of headings o H1 is largesto H6 the smallest size
14
Recap the First HTML code
<html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html>
15Lecture 7
Lecture 7
(2) Do it yourself!
o add another level of heading: <h2>…</h2> to the existing page
o add two paragraphs
and execute the html file using your web browser!
16
Lecture 7
How to insert texts in such indented manner?
How to insert white spaces before and after the texts?
17
Block Quote
The syntax for making an extended quote iso <blockquote>…</blockquote>
A browser inserts white space before and after a blockquote element.
Lecture 7 18
Block Quote
Lecture 7 19
<blockquote>
<p>Computer Networking: A top down approach, 5th ed. Addison-Wesley by Kurose and Ross, ISBN-10: 0136079679 | ISBN-13: 978-0136079675 </p>
<p>HTML A Beginner's Guide, 4th Edition, by Wendy Willard, ISBN-13: 9780071611435 </p>
<p>New Perspectives on HTML and XHTML: Comprehensive, 5th Edition, by Patrick M. Carey, ISBN-10: 1423925467 | ISBN-13: 9781423925460 </p>
</blockquote>
Lecture 7
Blockquote indents the texts but what if we want a list of items?
20
Lecture 7
List tags unordered list
o Also known as bulleted list<ul> … </ul>
Try inserting an unordered list in your html code!
21
Adding a List
HTML supports three kinds of lists: o unordered o ordered, ando definition
Unordered list for items that do not need to occur in any special order
Ordered list for items that must appear in a numerical order
Definition list for definition items
Lecture 7 22
Lecture 7
Adding lists unordered list (bulleted list):
o <ul> … </ul>
ordered list (enumerated list): o <ol> … </ol>:
o <li>…</li>: specify each list item for both unordered and ordered lists
definition list: <dl>…</dl>o a list of definitionso <dt>…</dt>: definition term o <dd>…</dd>: definition description
23
Lecture 7
Example for list tags<html><head><TITLE>Example for list tags</TITLE></head><body>Three kinds of lists are <ul>
<li>unordered list</li><li>ordered list </li><li>definition list </li>
</ul> <ol>
<li>unordered list</li><li>ordered list </li><li>definition list </li>
</ol>
<dl> <dt>unordered list:</dt> <dd>shows bullets</dd>
<dt>ordered list:</dt> <dd>shows number</dd><dt>definition list:</dt> <dd>lists definitions</dd>
</dl></body></html>
Creates bulleted list
Creates numbered list
Creates definition list
24
Lecture 7
Other block-level elements - address HTML supports the address element to indicate contact info.
<address> … </address>
Most browsers display an address element in an italicized font
e.g.<address>
John Jay College of Criminal Justice,
New York,
NY 10019
</address>
25
Block-Level Elements at a glance…
Lecture 7 26
Lecture 7
Working with inline elements
Inline element: marks a section of text within a block-level element
Often used to format characters and wordso Also referred to as character formatting elements
<b>,…,</b>: boldface element <i>,…,</i>: italicizes any text inside
27
Lecture 7 28
Make the text bold and italicized
Working with Empty Elements
An empty element contains no content Empty elements appear in code as one-sided
tags General syntax
o <element />
line breako <br />
horizontal lineo <hr />
Lecture 7 29
Lecture 7 30
Insert a horizontal line in between two paragraphs
Lecture 7 31
What if I decide to change the style of the text inside the
Tags?
Lecture 7 32
Attributes in Tags
Lecture 7 33
Attributes in tags
Attribute - a property of an HTML element (tag) Control appearance of elements in the document
consists of o attribute_name and o attribute_value
used with opening tag
General syntax<element attribute_name=“value1”>content</element>
The Attributes
Example: ALIGN attributeattribute_name: ALIGN
atribute_value: LEFT | CENTER | RIGHT
<H1>Welcome to MAT 279</H1>
<H1 ALIGN = “CENTER”>Welcome to MAT 279</H1>
More recent, style attribute
Lecture 7 34
Lecture 7 35
The style attribute controls how the browser displays an element used with opening tag syntax
<element style=“rules” … > content </element> rules
o a set of style ruleso entered by specifying a style name followed by a colon and
then a style valuestyle=“name1:value1; name2:value2; …”
e.g.<h1 style=“text-align:center”>Welcome to MAT 279</h1>
<h1 style=“color: blue”>Welcome to MAT 279</h1>
<h1 style=“text-align:center; color:blue”>Welcome to MAT 279</h1>