Post on 17-Jan-2017
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<!-- Write your comments here --> 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>
<!-- This is a comment --><p>This is a paragraph.</p><!-- Comments are not displayed in the browser -->
</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
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:deitel@deitel.com">here</a> 16 to open an email message addressed to 17 deitel@deitel.com. 18 </p> 19 20 <hr /> <!-- inserts a horizontal rule --> 21 22 <!-- special characters are entered --> 23 <!-- using the form &code; --> 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 <!-- to strike through text use <del> tags --> 28 <!-- to subscript text use <sub> tags --> 29 <!-- to superscript text use <sup> tags --> 30 <!-- these tags are nested inside other tags --> 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:deitel@deitel.com"> deitel@deitel.com 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.