HTML Introduction. Lecture 7 What we will cover… Understanding the first html code… Tags o...

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



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>

HTML Introduction. Lecture 7 What we will cover… Understanding the first html code… Tags o...

Documents

Transcript of HTML Introduction. Lecture 7 What we will cover… Understanding the first html code… Tags o...