Scribd
Upload
3 views67 pages

Chapter_3_HTML_1

course material

Uploaded by

tilahunagegnehu2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views67 pages

Chapter_3_HTML_1

course material

Uploaded by

tilahunagegnehu2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 67

Chapter 3:

WEB DESIGN AND DEVELOPMENT


FUNDAMENTALS
Introduction to HTML
• HTML stands for Hyper Text Mark-up Language. It is
the language for building web pages and consists of
standardized codes or “tags” that are used to define the
structure of information on the web page.
– HTML is not a programming language; it is a markup
language
– A Markup language is a collection of markup tags

– HTML uses Mark up tags to describe web pages


HTML Tags

• HTML tags are keywords (tag names) surrounded by angle


brackets like <html> in the form of
<tagname>content</tagname>
• Each HTML tag describes different document content
• HTML tags normally come in pairs like <p></p>
• The first tag in a pair is the start tag; the second tag is the end
tag
• The end tag is written like the start tag, but with a slash before
the tag name
• The start tag is often called the opening tag. The end tag is often
called the closing tag.
Creating HTML Documents
• HTML documents describe web pages
• Web page is a text file marked up with HTML
• HTML documents contain HTML tags and plain text
Getting started with HTML
• What tools do you need to get started?
– A Computer installed with a Browser (Example,
Mozilla Firefox, Internet Explorer, Google
chrome)
• The purpose of a browser is to read html documents and
display them as web pages. The browser doesn’t display
the html tags but uses them to interpret the content of a
page.
– Text editor (Example: Notepad, Notepad++
WordPad)
• The purpose of a text editor is for writing the html code
Steps for writing and running an html document:

• Write the html document in any text editor


• Save it with .html or .htm extension in your computer
• Then open the html document with any web browser
• A typical HTML document will have the following general
structure:
DOCTYPE Declaration
<html>
<head>
Header related tags
</head>
<body>
Body related tags
</body>
</html>
HTML document
• DOCTYPE Declaration
– An HTML document starts with DOCTYPE declaration that declares the version of

HTML to which the document conforms. The need for the DOCTYPE declaration is that

web browsers need to know what version of HTML/XHTML your web page is written in so

that they will know how to display it.

• The DOCTYPE declaration names the document type definition (DTD) in use for

the document. A Document Type Definition (DTD) is a set of Markup

declarations that define an HTML document structure with a list of legal elements

and attributes. This DTD is associated with html document by means of

Document Type Declaration (DOCTYPE Declaration).


HTML document
• A Document Type Declaration does the following two things:
– When performing HTML validation testing on a web page it tells the
HTML validator which version of HTML standard is used for writing
the web page.
– The doctype declaration helps the browser to interpret the HTML
code correctly and display the web page as intended
• There are many DOCTYPE declaration types which can be used in
HTML depending on what version of HTML is being used.
HTML 4.01:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
In HTML 5, the declaration is simple:
• <!doctype html>
HTML Basic Tags
The basic structure for all HTML documents is
simple and should include the following
minimum elements or tags:
<html> - The main container for HTML pages
<head> - The container for page header
information
<title> - The title of the page
<body> - The main body of the page
Document explanation
 <HTML>The first tag in your HTML document, this tag
tells your browser that this is the start of HTML
document.
– <HEAD>has sub-elements that define header
information; header information is not display in the
browser window.
• <TITLE>tag defines document title. The title of
your document is what appears in a web browser’s
Bookmark list. Your document’s title should be as
descriptive as possible. Search engines on the
Internet use the document’s title for indexing
purposes. </TITLE>
• <LINK>indicates a relationship between this
document and some other object on the Web.
</LINK>
Cont...
<META>provides information such as the page’s keywords
and description that appears in HTTP headers. </META>
<SCRIPT>contains either JAVA Script or VB Script
</SCRIPT>
<STYLE>contains information used by cascading style
sheets </STYLE>
</HEAD>
<BODY>the remaining HTML elements are contained within
these tags. The text between <body>tag is displayed in your
browser window.</BODY>
 </HTML> this tag tells your browser that this is the end of the
HTML document.
• Example: Simple HTML syntax
<HTML>
<HEAD>
<TITLE>Hello!!!...</TITLE>
</HEAD>
<BODY>
WELL COME TO DBU...
</BODY>
</HTML>
Cont...
• Output
HTML elements and Attributes
• HTML elements
– HTML documents are made up of HTML elements. An HTML element
is everything from the start tag to the end tag. HTML elements are
written with a start tag, with an end tag, and with the content in
between:
<tagname>content</tagname>
– HTML elements follow a certain format regardless of how the element
is used:
– An HTML element starts with a start tag/opening tag
– An HTML element ends with an end tag/closing tag
– The element content is everything between the start tag and end tag
– Some html elements don’t have content, hence are called empty
elements (e.g. img, hr)
– Empty elements are closed in the start tag (e.g. <br/>)
– HTML elements can be nested in other html elements
– Most HTML elements can have attributes
HTML elements and Attributes
• Block-level, inline and empty element
– Block element: - each block-level element begins on
new line and space is also usually add above and below
the entire element by default.
– e.g. header(h1-h5) and paragraph(p)
– Inline element:-do not start new line, they just go with
flow.
– Empty element:-Empty elements are do not have text
content b/c are used to provide a simple instruction
E.g. image element(img)
Line break (br)
HTML elements and Attributes
• HTML Attributes
– Attributes provide additional information about HTML
elements.
– HTML elements can have attributes
– Attributes are always specified in the start tag
– Attributes come in name/value pairs like: name="value“
– Attributes appear to the right of an element, separated by a
Space, and followed by an equal sign. The value of the
attribute is contained in quotes.
HTML Headings: are used for making headings
to content.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading.
Example :
<HTML>
<HEAD>
Output
<TITLE>XYZ Corporation</TITLE>
</HEAD>
<BODY>
<H1>XYZ Corporation</H1>
<H2>IS Department</H2>
<H3>Intranet Project</H3>
<H4>Intranet Project Plan</H4>
<H5>Internet Project<H5>
<H6>Internet Project Plan</H6>
</BODY>
Create Paragraph - The <p> Element:

The <p> element offers a way to structure your text. Each paragraph of

text should go in between an opening <p> and closing </p> tag as shown

below in the example:

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

Output
Here is a paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
You can use align attribute to align your paragraphs. Example:-
<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works when
you have multiple lines in your paragraph
and you want to justify all the lines so that they can
look more nice.</p>
Create Line Breaks - The <br /> Element:

• Whenever you use the <br /> element, anything


following it starts on the next line.
 This tag is an example of an empty element, where you
do not need opening and closing tags, as there is nothing
to go in between them.
Note: The <br /> element has a space between the
characters br and the forward slash. If you
omit this space, older browsers will have trouble
rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid
XHTML
Cont…
• Example:
Hello<br />
You come most carefully upon your
hour.<br />
Thanks<br />
Mahnaz
Out put
Horizontal Rules - The <hr /> Element
• Horizontal rules are used to visually break up sections
of a document. The <hr> tag creates a
line from the current position in the document to the
right margin and breaks the line
accordingly.
For example you may want to give a line between two
paragraphs as follows:
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
Out put
Formatting text
• Bold Text - The <b> Element:
Anything that appears in a <b>...</b> element
is displayed in bold, like the word bold here:
<p>The following word uses a <b>bold</b>
typeface.</p>
output
Formatting text (Cont.…)
• Italic Text - The <i> Element:
Anything that appears in a <i>...</i> element is
displayed in italicized, like the word italicized
here:
<p>The following word uses a
<i>italicized</i> typeface.</p>
output
Formatting text (Cont.…)
• Strike Text - The <strike> Element:
Anything that appears in a <strike>...</strike>
element is displayed with strikethrough, which
is a thin line through the text:
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
Output
Formatting text (Cont.…)
• Superscript Text - The <sup> Element:
The content of a <sup> element is written in superscript;
the font size used is the same size as
the characters surrounding it but is displayed half a
character's height above the other
characters.
<p>The following word uses a <sup>superscript</sup>
typeface.</p>
output
Formatting text (Cont.…)
Subscript Text - The <sub> Element:
The content of a <sub> element is written in
subscript; the font size used is the same as the
characters surrounding it, but is displayed half a
characters height beneath the other
characters.
<p>The following word uses a
<sub>subscript</sub> typeface.</p>
Formatting text (Cont.…)
Output
Formatting text (Cont.…)
Larger Text - The <big> Element:
The content of the <big> element is displayed
one font size larger than the rest of the text
surrounding it.
<p>The following word uses a <big>big</big>
typeface.</p>
Output
Formatting text (Cont.…)
• Smaller Text - The <small> Element:
The content of the <small> element is
displayed one font size smaller than the rest of
the text surrounding it.
<p>The following word uses a
<small>small</small> typeface.</p>
Output
HTML Font

• Font element used to modify the text size, style


and color using size, face and color attribute
respectively.
• Font face and color depends entirely on the
computer and browser that is being used to view
your page. But the <font> tag is used to add style,
size, and color to the text on your site.
• The font tag is having three attributes called size,
color, and face to customize your fonts.
HTML Font(Cont.…)

• To change any of the font attributes at any time within


your page, simply use the <font> tag. The text that
follows will remain changed until you close with the
</font> tag.
• You can change any or all of the font attributes at the one
time, by including all the required changes within the one
<font> tag.
• NOTE: The font tag is supposed to be removed in a
future version of HTML. So it should not be used. Its
is suggested to use CSS styles to manipulate your font.
Font Size:

• You can set the size of your font with size attribute.
– The size attribute can be set as absolute value from 1 to 7 or as a
relative value using the “+” or “-“sign.
– Normal text is size 3
Example:
<FONT SIZE="+2">Two sizes bigger</FONT>.
<FONT SIZE=“-2">Two sizes smaller</FONT>.
<font size="2">Font size="2"</font>
Output
Font Face:
• You can set any font you like using face attribute but be aware
that if the user viewing the page doesn't have the font installed,
they will not be able to see it. Instead they will default to Times
New Roman of your font. See below few examples on using
different font face
Example:
<font face="Times New Roman" size="5">Times New
Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans
MS</font>
<font face="WildWest" size="5">WildWest</font>
Cont…
Output
Font Color:
• You can set any font color you like using color attribute.
You can specify the color that you want by either the
color name or hexadecimal code for that color. Check a
complete list of HTML Color Name with Codes.
Example:
<font color="#FF00FF">This text is hexcolor
#FF00FF</font>
<font color="red">This text is red</font>
Output
HTML Lists

• Used to list out a list of items in your HTML


document.
• HTML specify 3 different types of lists
– Unordered List:Collections of items that appear in no
particular order.
– Ordered Lists:- Lists in which the sequence of the items
is important.
– Definition Lists:- Lists that consist of terms and
definitions
• Inside a list item you can put text, line breaks,
images, links, other lists, etc.
Unordered List
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• The list items will be marked with bullets (small black circles).
Browsers will usually change the list mark in nested lists.
Example:
<HTML><HEAD> Output
<TITLE>List Elements</TITLE>
</HEAD><BODY>
<H1> Computer Generation </H1>
<UL>
<LI>1st Generation </LI>
<LI>2nd Generation</LI>
<LI>3rd Generation</LI>
<LI>4rd Generation</LI>
</UL></BODY></HTML>
Unordered HTML Lists – Type Attribute
• You can use type attribute to specify the type of bullet you
like. By default it is a disc. Following are the possible way:

Attribute Description
Type=“disc” The list items will be marked with bullets
(default)
Type=“circle” The list items will be marked with circles

Type=“square” The list items will be marked with squares

Type=“none” The list items will not be marked


Ordered List
• Ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• The list items are marked with numbers.
Example Output
<html>
<title>html unordered list</title>
<body>
<ol>
<li> First oreder Element</li>
<li> Second oreder Element</li>
<li> Third oreder Element</li>
</ol>
</body>
</html>
Ordered HTML Lists -Type Attribute

• A type attribute can be added to an ordered


list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Definition Lists
• A definition Lists is a list of terms with a description of each term.
• Definition List makes use of following three tags.
– The <dl> tag defines a description/Defines the start of the list.
– The <dt> tag defines the term (name), and
– The <dd> tag defines term definition
Example: Output
<html><body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl></body></html>
Nesting Lists
• We can nest lists by inserting a UL, OL, etc., inside a list item (LI). Here
is sample HTML code how we can do the nesting list elements
Example
<html><body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li> Output
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Images
• Images are very important to beautify as well as to
describe many concepts on your web page. Its true that
one single image is better than thousands of words. So as
a Web developer should have clear understanding on how
to use images in your web pages.
• Insert Image - The <img> Element:
– You will insert any image in your web page by using
<img> tag. Following is the simple syntax to use this
tag.
<img src="image URL" attr_name = "attr_value" ...more
attributes />
HTML Images (Cont.…)
Example:
<HTML>
<HEAD>
<TITLE>Salary</title>
</HEAD>
<BODY>
<p>This is the first paragraph that appears above the paragraph with the image!</p>
<p><img src=“logo.jpg" vspace="10" hspace="15" width="75" height="75" alt="Well
come" align="right">
The image will appear along the right hand side of the paragraph.
As you can see this is very nice for adding a little eye candy that relates to the
specified paragraph.</p>
<p>The left and right image-alignment values tell the browser to place an image
against the left or right margin, respectively, of the current text flow.
The browser then renders subsequent document content in the remaining portion of
the flow adjacent to the image.
The net result is that the document content following the image gets wrapped around
the image. </p>
</BODY>
</HTML>
<Img> attribute
• Src: Specifies the URL of an image.
• Align: Specifies the alignment of an image according to
surrounding elements. values can be top, bottom, middle, left,
right
• alt: Specifies an alternate text for an image
• border: Specifies the width of the border around an image
• height: Specifies the height of an image
• width: Specifies the width of an image
• hspace: Specifies the whitespace on left and right side of an
image
• vspace: Specifies the whitespace on top and bottom of an image
• title: specifies a text title. The browser, display the title when
the mouse passes over the image.
<video width="320" height="240" Controls loop
muted Poster="abcd.png" autoplay>
<source src="abc.mp4" type="video/mp4">
<source src="abc.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Insert video
• You can add music or video into your web page. The easiest
way to add video or sound to your web site is to include the
special HTML tag called <embed>.
• Following is the list of important attributes for <embed>
element.
– align - Determines how to align the object. It takes either center,
left or right.
– hidden - Defines if the object shows on the page. A false value
means no and true means yes.
– height - Height of the object .
– width - Width of the object .
– src - URL of the object to be embedded. This can be any
recognizable by the user's browser. It could
be .mid, .wav, .mp3, .avi and so on).
– border- sets border thickness around the embed content
Insert video
HTML Video Tags
• <video>
• <source>
• <track>
Adding Video Using <video> Tag
• The <video> tag is used to embed video content in a document,
such as a movie clip or other video streams.
• The <video> tag contains one or more <source> tags with
different video sources. The browser will choose the first source
it supports
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Insert video

• Autoplay: autoplay- Specifies that the video will start playing as


soon as it is ready
• Controls:controls- Specifies that video controls should be
displayed (such as a play/pause button etc).
• Height:pixels-Sets the height of the video player
• Loop:loop- Specifies that the video will start over again, every
time it is finished
• Muted:muted- Specifies that the audio output of the video should
be muted
• Poster:URL- Specifies an image to be shown while the video is
downloading, or until the user hits the play button
• Preload:auto,metadata,none- Specifies if and how the author
thinks the video should be loaded when the page loads
• Src:URL- Specifies the URL of the video file
• Width:pixels- Sets the width of the video player
Adding Video Using Iframe Tag

<!DOCTYPE html>
<html>
<body style="text-align: center">
<h2>Using Iframe Tag</h2>
<iframe width="400" height="200"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/
Canvas.move_.mp4"
frameborder="0"
allowfullscreen>
</iframe>
</body>
</html>
Adding Video Using the object element
• The <object> tag defines an embedded object within an HTML
document. Use this element to embed multimedia (like audio, video,
PDF, etc…) in your web pages.
• Data attribute –specify URL of the object to be added.
<!DOCTYPE html>
<html>
<body style="text-align: center">
<h2>Using the object element</h2>
<object width="500"
height="400"
data=
"https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/
Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4"
type="video/mp4">
</object>
</body>
</html>
ADDING LINKS
• Link Elements
– It is normal for HTML documents to contain links to other documents,
which can be located anywhere on the Web.
– There is one element that makes linking possible the anchor <a>…</a>
<A HREF=”URL”> content</A>
– The content of the anchor element becomes the hypertext
link(Anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach
to the linked document).
– The HREF attribute of the anchor element specifies a URL.
E.g. <A HREF=”http://www.xnu.com”>XtraNet University</A>
– In this example the text “XtraNet University” represents the contents
that would be highlighted as a link to the file named as the value of the
HREF.
– To make an image a link, simply put the img element in the anchor
element:-
<a href=” http://www.xnu.com”> <img src=” XtraNet.jpg”></a>
Link Types
• There are three major types of links:
– Internal Links: are links within a document.
– Local Links: are links to documents on the local
web server. Local links can be the full URL
(Complete e.g.
http://www.yourdomain.com/sales/report.htm) or
partial (Relative to your current directory e.g.
/sales/report.htm).
– External Links: links to pages on other web
servers. External links are always the full URL.
1.Internal Links:- Linking within a page

• Linking to a fragment within a page is a two part


process. first you need to give the fragment a name and
then you make a link to it.
Step 1: naming a Fragment
<A NAME="text">
– The anchor tag with the name attribute is used to give a
section of the page a name that can be referenced elsewhere.
Step 2. Linking to a Fragment
<A HREF="#text">
– The link is an ordinary link, only it includes a hash (#) symbol
before the name to indicate that we are linking to a fragment.
Internal Links(cont…)
• Example: let say you have sections in one
chapter (INTRODUCTION, HTML, PHP) and
you want to make link for each section within
a page.
• To link to html section
1. Name the section using
<A NAME="html">HTML</A>
2. Link to HTML section (fragment) using
<A HREF="#html">HTML</A>
Example
<html><head><title>internal list</title></head>
<body>
<a NAME=”top”>
<ul>
<a href=”#html”><li>html</li></a>
<a href=”#css”><li>css</li></a>
</ul>
<p>web design is …..<br>
….. </p>
<a NAME=”html”><a href=”#top”>top</a>
<p>Html
Stands of hyper text markup languge <br>
It is markup languge<p><a href=”#top”>top</a>
<a NAME=”css”>
Css:- It Stands for cascading style sheet
</body></html>
Local Links:- Linking within your own
site
• To make local link you need to provide
relative URLs
• Relative URLs describe the pathname to the
linked file relative to the current document.
• Pathname: is the notation used to point to a
particular file or directory, Starting with the
current document, you need to describe
(specify) the pathname to the target document.
Local Links(cont…)
A. Linking within a directory
– This links to other file within the same directory.
You only need to provide the name of the file.
without any other path information, the browser
will assume that the file is in the some directory as
the current document.
• Example: consider the structure below(Get
Eva hotel website structure)
Local Links(cont…)
Get Eva hotel

services
Index.ht
contact
ml
Us.html

Room
Food.ht
ml

Room
resrvation.
html
Local Links(cont…)
• To link from index.html to contactUs.html
<A HREF="contactUs.html">Contact us </A>
• Note: pathname=contactUs.html
Local Links(cont…)
B. Linking to lower directory
• If the files are not in the same director but in the same site, you
have to give to the browser directions by including the path name
in the URL.
• Example 1: To link from index.html to food.html in the Get Eva
web site structure(in the above example)
<A HREF=“service/food.html">reply </A>
Note: pathname=service/food.html
• Example 1: To link from index.html to Roomresrvation.html
in the lewe web site structure(in the above example)
<A HREF=“/service/Room/Roomresrvation.html">reply </A>
Note: pathname=service/Room/Roomresrvation.html
Local Links(cont…)
C. Linking to a higher directory
• When we want to link to higher directory we use the "dot-dot-
slash"(../). When you begin a pathname with a ../ it is the same as
telling to the browser as "go up one level" then follow the path to
the specified file.
• Example 1: If you want to link from food.html to index.html
<A HREF="../index.html">Home</A>
• Note: pathname=../index.html
• Example 2: If you want to link from Roomresrvation.html to
index.html
<A HREF="../../index.html">Home</A>
Note: pathname=../../index.html
External Links:-Linking to pages on the web

• Many times, you want to create links to page that is found


on the web. This is known as "External" link, because it is
going to a page outside of your own server or site.
• To make an external link, you need to provide absolute
URL.
Example
<A HREF="http://www.google.com">Google.com</A>
• Beginning with the http:// part (protocol) tells the browser,
"Go out on the web and get the following document".
Anchor Tag Attribute
Following are most frequently used attributes for <a> tag.
• Href: specifies the URL of the target of a hyperlink. Its
value is any valid document URL, absolute or relative,
including a fragment identifier or a JavaScript code
fragment.
• Target: specify where to display the contents of a selected
hyperlink. If set to "_blank” a new window will be opened to
display the loaded page, if set to "_top" or "_parent" then
same window will be used to display the loaded document, if
set to "_self" then loads the new page in current window. By
default its "_self".
• Name & id: attributes places a label within a document.
When that label is used in a link to that document, it is the
equivalent of telling the browser to goto that label.
Anchor Tag Attribute (Cont.…)
• Event: attributes like onClick, onMouseOver etc. are used to
trigger any Javascript or VBscript code.
• Title: attribute lets you specify a title for the document to
which you are linking. The value of the attribute is any
string, enclosed in quotation marks. The browser might use it
when displaying the link, maybe blinking the title when the
mouse passes over the link.
• Access key: attribute provides a keyboard shortcut that can
be used to activate a link. For example, you could make the
T key an access key so that when the
user presses either the Alt or Ctrl key on his keyboard
(depending on his operating system) along with the T key,
the link gets activated.
QUESTION ?

You might also like