Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
80 views

Lecture 02 HTML Basics

This document provides an introduction and overview of HTML (Hypertext Markup Language). It outlines common HTML tags and elements used to structure and style text, add images and links, and format pages. Key sections include introductions to HTML markup languages, editing HTML files, common tags for headings, paragraphs, and other text elements. It also details how to use specific tags for styling text, inserting images, creating hyperlinks, and formatting text with fonts and colors.

Uploaded by

Lokesh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
80 views

Lecture 02 HTML Basics

This document provides an introduction and overview of HTML (Hypertext Markup Language). It outlines common HTML tags and elements used to structure and style text, add images and links, and format pages. Key sections include introductions to HTML markup languages, editing HTML files, common tags for headings, paragraphs, and other text elements. It also details how to use specific tags for styling text, inserting images, creating hyperlinks, and formatting text with fonts and colors.

Uploaded by

Lokesh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

Introduction to HTML

Outline

Introduction
Markup Languages
Editing HTML
Common Tags
Headers
Text Styling
Linking
Images
Formatting Text With <FONT>
Special Characters, Horizontal Rules and More Line Breaks

1 Introduction
HTML

HyperText Markup Language


Not a procedural programming language like C, Fortran, Cobol
or Pascal
Markup language

Identify elements of a page so that a browser can render that page


on your computer screen

Presentation of a document vs. structure

Markup Languages
Markup language

Used to format text and information

HTML

Marked up with elements, delineated by tags


Tags: keywords contained in pairs of angle brackets

HTML tags

Not case sensitive


Good practice to keep all the letters in one case

Forgetting to close tags is a syntax error

3.3 Editing HTML


HTML files or documents

Written in source-code form using text editor

HTML files

.htm or .html extensions


Name your files to describe their functionality
File name of your home page should be index.html

Errors in HTML

Usually not fatal

Common Tags
Always include the <HTML></HTML> tags
Comments placed inside <!----!> tags
HTML documents

HEAD section

Info about the document


Info in header not generally rendered in display window
TITLE element names your Web page

BODY section

Page content
Includes text, images, links, forms, etc.
Elements include backgrounds, link colors and font faces
P element forms a paragraph, blank line before and after

Common Tags (cont.)


<HTML>
<HEAD>
<TITLE>Internet and WWW How to Program </HEAD>
Welcome</TITLE>
<BODY>
<P>Welcome to Our Web Site!</P>
</BODY>
</HTML>

Headers
Headers

Simple form of text formatting


Vary text size based on the headers level
Actual size of text of header element is selected by browser
Can vary significantly between browsers

CENTER element

Centers material horizontally


Most elements are left adjusted by default

Headers
<html>
<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
</html>

Header elements H1 through H6

Text Styling
Underline style

<U></U>

Align elements with ALIGN attribute


right, left or center
Close nested tags in the reverse order from which they were

opened
Emphasis (italics) style

<EM></EM>

Strong (bold) style

<STRONG></STRONG>

<B> and <I> tags deprecated

Overstep boundary between content and presentation

1 <HTML>
2
3 <!-- Fig. 3.3: main.html -->
4 <!-- Stylizing your text -->
5
6 <HEAD>
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>
8 </HEAD>
9
10<BODY>
11<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
12
13<P>We have designed this site to teach
14about the wonders of <EM>HTML</EM>. We have been using
15<EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
16and we enjoy the features that have been added recently.
17seems only a short time ago that we read our first
It
18book. Soon you will know about many of the great new
<EM>HTML</EM>
19of HTML 4.0.</P>
features
20
21<H2 ALIGN = "center">Have Fun With the Site!</H2>
22
23</BODY>
24</HTML>

Stylizing text on Web pages

Stylizing text on Web pages


Tag

Description

<b>

Defines bold text

<em>

Defines emphasized text

<i>

Defines a part of text in italic

<small>

Defines smaller text

<strong>

Defines important text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

<mark>

Defines marked/highlighted text

Linking
Links inserted using the A (anchor) element

Requires HREF attribute

HREF specifies the URL you would like to link to


<A HREF = address></A>
Can link to email addresses, using
<A HREF = mailto: emailaddress></A>
Note quotation mark placement

Linking
A hyperlink (or link) is a word, group of words, or

image that you can click on to jump to another


document.
When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
By default, links will appear as follows in all
browsers:

An unvisited link is underlined and blue


A visited link is underlined and purple
An active link is underlined and red

<html>
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click a name to go to that page.</strong></p>
<!-- Create four text hyperlinks -->
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>

Linking to other Web pages

<html>
<head>
<title>Hyper Linking </title>
</head>
<body>
<p>My email address is
<a href = "mailto:lokesh.sharma@jaipur.manipal.edu">
lokesh.sharma@jaipur.manipal.edu
</a>
. Click the address and your browser will
open an e-mail message and address it to me.
</p>
</body>
</html>

The HTML <head> Element


The <head> element is a container for all the head

elements. Elements inside <head> can include


scripts, instruct the browser where to find style
sheets, provide meta information, and more.
The following tags can be added to the head section:

<title>, <style>, <meta>, <link>, <script>,


<noscript>, and <base>.

The HTML <title> Element


The <title> tag defines the title of the document.
The <title> element is required in all

HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favourites
displays a title for the page in search-engine results

The HTML <base> Element


The <base> tag specifies the base URL/target for all

relative URLs in a page:

The HTML <link> Element


The <link> tag defines the relationship between a

document and an external resource.


The <link> tag is most used to link to style sheets:

The HTML <style> Element


The <style> tag is used to define style information

for an HTML document.


Inside the <style> element you specify how HTML

elements should render in a browser:

The HTML <meta> Element


Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.

Metadata will not be displayed on the page, but will be machine


parsable.
Meta elements are typically used to specify page description,

keywords, author of the document, last modified, and other


metadata.
The metadata can be used by browsers (how to display content or

reload page), search engines (keywords), or other web services.

<meta> Tags - Examples of Use

Images
Images as anchors
Background color

Preset colors (white, black, blue, red, etc.)


Hexadecimal code

First two characters for amount of red


Second two characters for amount of green
Last two characters for amount of blue
00 is the weakest a color can get
FF is the strongest a color can get
Ex. black = #000000

Images
Image background
<BODY BACKGROUND = background>
Image does not need to be large as browser tiles image across and down the
screen
Pixel
Stands for picture element
Each pixel represents one addressable dot of color on the screen
Insert image into page
Use <IMG> tag

Attributes:
SRC = location
HEIGHT (in pixels)
WIDTH (in pixels)
BORDER (black by default)
ALT (text description for browsers that have images turned off or cannot view
images)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<HTML>
<!-- Fig. 3.6: picture.html -->
<!-- Adding images with HTML -->
<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY BACKGROUND = "background.gif">
<CENTER>
<!-- Format for entering images: <IMG SRC = "name"> -->
<IMG SRC = "deitel.gif" BORDER = "1" HEIGHT = "144"
WIDTH = "200" ALT = "Harvey and Paul Deitel">
</CENTER>
</BODY>
</HTML>

<html>
<head>
<title>Internet and WWW How to Program - Navigation Bar </title>
</head>
<body>
<p>
<a href = "links.html"><img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a><br />
<a href = "list.html"><img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a><br />
<a href = "contact.html"><img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" />
</a><br />

<a href = "header.html"> <img src = "buttons/header.jpg" width = "65"


height = "50" alt = "Header Page" />
</a><br />
<a href = "table.html"><img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" />
</a><br />
<a href = "form.html"><img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" />
</a><br />
</p>
</body>
</html>

Using images as link anchors

Formatting Text With <FONT>


FONT element

Add color and formatting to text


FONT attributes:

COLOR
Preset or hex color code
Value in quotation marks
Note: you can set font color for whole document using TEXT
attribute in BODY element

Formatting Text With <FONT> (II)

SIZE
To make text larger, set SIZE = +x
To make text smaller, set SIZE = -x
x is the number of font point sizes

FACE
Font of the text you are formatting
Be careful to use common fonts like Times, Arial, Courier and
Helvetica
Browser will display default if unable to display specified font

Example
<FONT COLOR = red SIZE = +1 FACE = Arial>
</FONT>

1<HTML>
2
3<!-- Fig. 3.8: main.html
-->
4<!-- Formatting text size and color -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Welcome</TITLE>
8</HEAD>
9
10<BODY>
11
12<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
13
14<!-- Font tags change the formatting of text they enclose -->
15<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have
16designed this site to teach about the wonders of
17<EM>HTML</EM>.</FONT>
18
19<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been
20using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
21and we enjoy the features that have been added recently.</FONT>
22
23<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It
24seems only a short time ago that we read our first <EM>HTML</EM>
25book.</FONT>
26
27<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will
28know about many of the great new feature of HTML 4.0.</FONT></P>
29
30<H2 ALIGN = "center">Have Fun With the Site!</H2></P>
31
32</BODY>
33</HTML>

Using the FONT element to format text

Special Characters, Horizontal Rules and More Line Breaks


Special characters

Inserted in code form


Format always &code;

Ex. &amp;
Insert an ampersand

Codes often abbreviated forms of the character


Codes can be in hex form

Ex. &#38; to insert an ampersand

Strikethrough with DEL element


Superscript: SUP element
Subscript: SUB element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<HTML>
<!-- Fig. 3.9: contact.html
-->
<!-- Inserting special characters -->
<HEAD>
<TITLE>Internet and WWW How to Program - Contact Page</TITLE>
</HEAD>
<BODY>
<!-- Special characters are entered using the form &code; -->
<P>My email address is <A HREF = "mailto:deitel@deitel.com">
deitel@deitel.com</A>. Click on the address and your browser
will automatically open an email message and address it to my
address.</P>
<P>All information on this site is <STRONG>&copy;</STRONG>
Deitel <STRONG>&amp;</STRONG> Associates, 1999.</P>
<!-- Text can be struck out with a set of <DEL>...</DEL>
-->
<!-- tags, it can be set in subscript with <SUB>...</SUB>, -->
<!-- and it can be set into superscript with <SUP...</SUP> -->
<DEL><P>You may copy up to 3.14 x 10<SUP>2</SUP> characters
worth of information from this site.</DEL><BR> Just make sure
you <SUB>do not copy more information</SUB> than is allowable.
<P>No permission is needed if you only need to use <STRONG>
&lt; &frac14;</STRONG> of the information presented here.</P>
</BODY>
</HTML>

Inserting special characters into HTML

Special Characters, Horizontal Rules and More Line Breaks (II)


Horizontal rule
<HR> tag
Inserts a line break directly below it
HR attributes:

WIDTH
Adjusts the width of the rule
Either a number (in pixels) or a percentage
SIZE
Determines the height of the horizontal rule
In pixels
ALIGN
Either left, right or center
NOSHADE
Eliminates default shading effect and displays horizontal rule as a solidcolor bar

1<HTML>
2
3<!-- Fig. 3.10: header.html
-->
4<!-- Line breaks and horizontal rules -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Horizontal
Rule</TITLE>
8</HEAD>
9
10<BODY>
11<!-- Horizontal rules as inserted using the format: -->
12<!-- <HR WIDTH = ".." SIZE = ".." ALIGN = "..">
-->
13<HR WIDTH = "25%" SIZE = 1>
14<HR WIDTH = "25%" SIZE = 2>
15<HR WIDTH = "25%" SIZE = 3>
16
17<P ALIGN = "left"><STRONG>Size:</STRONG>4
18<STRONG>Width:</STRONG>75%
19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left">
20
21<P ALIGN = "right"><STRONG>Size:</STRONG>12
22<STRONG>Width:</STRONG>25%
23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right">
24
25<P ALIGN = "center"><STRONG>Size:</STRONG>8
26<STRONG>Width:</STRONG>50%
27<STRONG><EM>No shade...</EM></STRONG>
28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center">
29
30</BODY>
31</HTML>

Using horizontal rules

You might also like