Lectuer html1

HTML Basics part 1

Tags, Headings, Paragraphs, Text Formatting, linksL list

T. Nawal Abdullah Alragwi

Basic HTML

HTML is a markup language for describing

web documents (web pages). HTML stands for Hyper Text Markup

Language A markup language is a set of markup tags HTML documents are described by HTML

tags Each HTML tag describes different

document content.

What is HTML?

4

HTML History HTML 2.0 HTML 3.2 HTML 4.0

– All formatting is separated into a style sheet. HTML 4.01

– Makes the future upgrade from HTML to XHTML in a simple process.

XHTML – sometimes referred to as HTML 5– The future of HTML standard– Almost identical to HTML 4.01

HTML Editors HTML can be edited by using a

professional HTML editor like:– Adobe Dreamweaver– Microsoft Expression Web– CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC).

We believe using a simple text editor is a good way to learn HTML.

6

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open NotepadTo open Notepad in Windows 7 or earlier:Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. Step 2: Write Some HTMLWrite or copy some HTML into Notepad.

Step 3: Save the HTML PageSelect File > Save as in the Notepad menu.Name the file "index.htm" or any other name ending with

htm.UTF-8 is the preferred encoding for HTML files.

HTML Editors

7

HTML Elements HTML elements are written with a start tag, with an

end tag, with the content in between: <tagname>content</tagname> The HTML element is everything from the start tag to

the end tag: <p>My first HTML paragraph.</p>

What are Element / Tags?

End tag Element content Start tag

/<h1> My First Heading <h1>/<p> My first

paragraph. <p>

<br>

8

HTML Document Template

9

8 <!DOCTYPE html> <html> <head> 9 <title>Welcome</title>

10 </head>

11

12 <body>

13 <p>Welcome to HTML!</p>

14 </body>

15 </html>

Creates a head element

Creates a title element, which contains the text Welcome

Creates a p element within the body, which displays welcome text

HTML Example

10

Example Explained

The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML

document The text between <head> and </head> provides information

about the document The text between <title> and </title> provides a title for the

document The text between <body> and </body> describes the visible page

content The text between <p> and </p> describes a paragraph

11

HTML Page Structure Main HTML Elements / Tags

12

HTML Attributes

<p align=“right”> welcome </p>

Element Attribute Name Attribute Value

HTML elements can have attributes.Attributes provide additional information about an

element.Attributes are always specified in the start tag.Attributes come in name/value pairs like:

name="value"

content

13

Headings Heading Types

– <H1 ...> ... </H1>– <H2 ...> ... </H2>– <H3 ...> ... </H3>– <H4 ...> ... </H4>– <H5 ...> ... </H5>– <H6 ...> ... </H6>

Attributes: ALIGN– Values: LEFT (default), RIGHT, CENTER

Nesting tags– Headings and other block-level elements can

contain text-level elements, but not vice versa

14

Headings, Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE>Document Headings</TITLE></HEAD><BODY>Samples of the six heading types:<H1>Level-1 (H1)</H1><H2 ALIGN="CENTER">Level-2 (H2)</H2><H3><U>Level-3 (H3)</U></H3><H4 ALIGN="RIGHT">Level-4 (H4)</H4><H5>Level-5 (H5)</H5><H6>Level-6 (H6)</H6></BODY></HTML>

15

Headings, Result

16

P – The Basic Paragraph Attributes: ALIGN

– LEFT (default), RIGHT, CENTER. Same as headings.– Whitespace ignored (use <BR> for line break)– End Tag is Optional: <BODY> <P> Paragraph 1 </P> <P> Paragraph 2 </P> <P> Paragraph 3 </P> </BODY>Fully-Specified

<BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 </BODY>Equivalent with Implied Tags

17

<html><head> <title>Text Layout</title></head>

<body> <p> This is a paragraph of text <br/> made up of two lines. </p>

<p> This is another paragraph with a GAP between some of the words. </p>

<p> This paragraph is <br/> indented on the first line <br/> but not on subsequent lines. </p></body>

</html>

Paragraph, Example

18

Paragraph, Result

You can add comments to your HTML source by using the following syntax:Example Note: There is an exclamation point (!) in the opening tag, but

not in the closing tag. Comments are not displayed by the browser, but they can

help document your HTML. With comments you can place notifications and reminders

in your HTML:

HTML Comment Tags

20

<!DOCTYPE html><html><body>

<p>This is a paragraph.</p>

</body></html>

Comment, Example

21

HTML Text Formatting Elements

Tag Description<u> Under line<b> Bold text<big> Big text<em> Emphasized text<i> Italic text<tt>… </tt>

specify typewriter-like (fixed-width) font

<small> Small text<strong> Strong text<sub> Subscripted text<sup> Superscripted text

22

Tag Description<br/> Break-enter<hr/> Horizontal line<Pre> Defines preformatted text<abbr> abbreviation<strike> Defines deleted text

<ins> Defines inserted text<del> Defines deleted text<mark> Defines marked/highlighted text

> <code Defines programming code>kbd< Defines keyboard input >samp< Defines computer output>var< Defines a mathematical variable

http://www.w3schools.com/tags/tag_code.asp

http://www.w3schools.com/tags/tag_kbd.asp



http://www.w3schools.com/tags/tag_samp.asp



http://www.w3schools.com/tags/tag_var.asp



23

The most common entitiesDisplay Description Name

Non-breaking space

< Less than <> Greater than >& Ampersand &“ Quotation mark "‘ Apostrophe '

24

HTML Computer Code Elements Normally, HTML uses variable letter

size, and variable letter spacing. This is not wanted when displaying

examples of computer code. The <kbd>, <samp>, and <code>

elements all support fixed letter size and spacing.

25

HTML Text Formatting Elements Example...<H1>Physical Character Styles</H1><B>Bold</B><BR><I>Italic</I><BR><TT>Teletype (Monospaced)</TT><BR><U>Underlined</U><BR>Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR><SMALL>Smaller</SMALL><BR><BIG>Bigger</BIG><BR><STRIKE>Strike Through</STRIKE><BR><B><I>Bold Italic</I></B><BR><BIG><TT>Big Monospaced</TT></BIG><BR><SMALL><I>Small Italic</I></SMALL><BR><FONT COLOR="GRAY">Gray</FONT><BR><DEL>Delete</DEL><BR><INS>Insert</INS><BR>...

26

HTML Text Formatting Elements, Result

27

HTML Computer Code ElementsExample...<H1>Logical Character Styles</H1><EM>Emphasized</EM><BR><STRONG>Strongly Emphasized</STRONG><BR><CODE>Code</CODE><BR><SAMP>Sample Output</SAMP><BR><KBD>Keyboard Text</KBD><BR><DFN>Definition</DFN><BR><VAR>Variable</VAR><BR><CITE>Citation</CITE><BR><EM><CODE>Emphasized Code</CODE></EM><BR><FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR><ACRONYM TITLE="Java Development Kit">JDK

Acronym</ACRONYM>...

28

HTML Computer Code Elements, Result

29

6 7 <html > 8 <head> 9 <title>Contact Page</title> 10 </head> 11 12 <body> 13 <p> 14 Click 15 <a href = "mailto:[email protected]">here</a> 16 to open an email message addressed to 17 [email protected]. 18 </p> 19 20 <hr />  21 22  23  24 <p>All information on this site is <strong>© 25 Deitel & Associates, Inc. 2007.</strong></p> 26

Inserts a horizontal rule, with a line break before and after

Inserts the special characters © and &

Physical Character Styles, Example

30

27  28  29  30  31 <p><del>You may download 3.14 x 10<sup>2</sup> 32 characters worth of information from this site.</del> 33 Only <sub>one</sub> download per hour is permitted.</p> 34 <p><em>Note: < ¼ of the information 35 presented here is updated daily.</em></p> 36 </body> 37 </html>

Makes the 2 superscript

Makes the 1 subscript

Creates a strikethrough effect

Emphasizes text

Inserts the special symbols < and ¼

31

HTML Lists Unordred Lists Ordered Lists Definition Lists

32

OL: Ordered (Numbered) Lists

OL Element– <OL>

<LI>… <LI>… ...</OL>

– Attributes: TYPE, START, COMPACT List entries: LI

– <LI ...> ... </LI> (End Tag Optional)– Attributes: (When inside OL) VALUE, TYPE

A sample list:<OL> <LI>List Item One <LI>List Item Two <LI>List Item Three</OL>

33INE2720 – Web Application Software Development

Nested Ordered Lists

<OL TYPE="I"> <LI>Headings <LI>Basic Text Sections <LI>Lists <OL TYPE="A"> <LI>Ordered <OL TYPE="1"> <LI>The OL tag <OL TYPE="a"> <LI>TYPE <LI>START <LI>COMPACT </OL> <LI>The LI tag </OL> <LI>Unordered <OL TYPE="1"> <LI>The UL tag <LI>The LI tag </OL> <LI>Definition <OL TYPE="1"> <LI>The DL tag <LI>The DT tag <LI>The DD tag </OL> </OL> <LI>Miscellaneous</OL>

34

UL: Unordered (Bulleted) Lists UL Element

– <UL> <LI>… <LI>… ...</UL>

Attributes: TYPE, COMPACT– TYPE is DISC, CIRCLE, or SQUARE

List entries: LI (TYPE)– TYPE is DISC, CIRCLE, or SQUARE

A sample list:<UL> <LI>List Item One <LI>List Item Two <LI>List Item Three</UL>

35INE2720 – Web Application Software Development

UL: Custom Bullets

<UL TYPE="DISC"> <LI>The UL tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>COMPACT </UL> <LI>The LI tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>VALUE </UL></UL>

36

HTML Links <a> to create a link to another

document. The target attribute

– <a href=“…”, target=“_blank”>xxx</a>

– Open the document in a new browser window.

The name attribute– <a name=“abc”>– <a href=“#abc”>Useful text</a>

1 8 <html >9 <head>10 <title>Internet and WWW How to Program - Links</title>11 </head>12 13 <body>14 15 <h1>Here are my favorite sites</h1>16 17 <p><strong>Click on a name to go to that page.</strong></p>18 19 <p><a href = "http://www.deitel.com">Deitel</a></p>20 21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>22 23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>24 25 <p><a href = "http://www.usatoday.com">USA Today</a></p>26 27 </body>28 </html>

Text between strong tags will appear bold.

Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it.

Linking is accomplished in XHTML with the anchor (a) element.

The anchor links to the page that’s value is given by the href attribute.

The text between the a tags is the anchor for the link.

Hypertext LinksClicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Contact Page11 </title>12 </head>13 14 <body>15 16 <p>My email address is 17 <a href = "mailto:[email protected]"> [email protected] 18 </a>. Click the address and your browser will open an19 email message and address it to me.</p>20 21 </body>22 </html>

To create an email link include “mailto:” before the email address in the href

attribute.

When a user clicks on an email link, an email message addressed to the

value of the link will open up.