Chapter Three Part I

Chapter Three
HTML
Skills with Web based technologies
• Informing colleagues about progress on team projects.
• Using or contributing to the company intranet.
• Working with customers online.
• Posting or retrieving résumés.
• Gathering information from customers or community
members about their interests.
• Obtaining information from social networking activities.
• Web developer
• Site designer
Cont…
• Site map:- A brief, hierarchical representation of a Web site
that enables visitors to quickly identify areas of the site and
navigate to them.
Markup Languages
• A series of commands used to format, organize and describe
information on a Web page.
• Web page creation by any method requires a working
knowledge of Hypertext Markup Language (HTML).
• HTML:- It is the standard markup language on the Web, and in
other settings. HTML is standardized by an organization called
the World Wide Web Consortium (W3C).
• Markup language that defines page structure, hyperlinks, graphics
and more to enable pages to render in Web browsers and other
devices.
• CSS:-Cascading Style Sheets (CSS) are rules in an external text
file that determine how to display HTML elements in your Web
pages.
• CSS contain formatting instructions that can define the font,
color and phrase elements used on a particular markup page.
What Is HTML
• It is Hyper Text Markup Language.
• A language for describing a web page (layout and

presentation).
• A markup language is a set of markup tags.
• The tags describe document content.
• HTML documents contain HTML tags and plain text.
• HTML documents are also called web pages.

HTML Tags
• HTML markup tags are usually called HTML tags.
• HTML tags are keywords (tag names) surrounded by angle

brackets.
• HTML tags normally come in pairs.
• The first tag in a pair is the start tag, the second tag is the end
tag.
• Start and end tags are also called opening tags and closing tags
• <tagname>content</tagname>
Document Tree
HTML Documents
• All HTML documents must start with a type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and
</body>.
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Attributes
• 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“
• <html lang="en-US">
• <p align=“center”>
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Cont…
• HTML Headings
• HTML headings are defined with the <h1> to <h6>
tags:
• <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3> ….
• Search engines use the headings to index the structure and
content of your web pages.
• Users often skim a page by its headings. It is important to use
headings to show the document structure.
• <h1> headings should be used for main headings, followed by
<h2> headings, then the less important <h3>, and so on.
Cont…
• HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and
after a paragraph.
• With HTML, you cannot change the display by adding
extra spaces or extra lines in your HTML code.
• The browser will automatically remove any extra
spaces and lines when the page is displayed:
Cont…
• Horizontal Line
• <hr> creates a horizontal line
• The <hr> element is used to separate content (or
define a change) in an HTML page:
• The <hr> tag is an empty tag, which means that it
has no end tag.
• Line Breaks
• <br> inserts a new line
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
• The <br> tag is an empty tag, which means that it
has no end tag.
Cont…
• Preserve Formatting
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both
spaces and line breaks:
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
Cont…
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
• <tagname style="property:value;">
• Background Color
• <body style="background-color:orange;">
• <h1 style="background-color:powderblue;">This is a heading</h1>

•
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
• Text Color
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Cont…
• Fonts
• <h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
• Text Size
• <h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
• Text Alignment
• <h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
• Formatting elements were designed to display special types
of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Cont’d…
• Comments
• HTML comments are not displayed in the browser, but they
can help document your HTML source code.
• 
Cont…
• HTML Links – Hyperlinks
• A hyperlink is an element, a text, or an image that you can click
on, and jump to another document.
• A link does not have to be text. A link can be an image or any
other HTML element!
• links are defined with the <a> tag:
• <a href="url“ target=“”>link text</a>
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as
it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
Cont…
• HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag:
• <a href="default.asp">
• <img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
• </a>
•HTML bookmarks are used to allow readers to jump to
specific parts of a Web page.
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark
Cont…
• HTML images
• The HTML <img> tag is used to embed an image in a web
page.
• Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding
space for the referenced image.
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• <img src="url" alt="alternate text“ style="width:
10px;height:10px;">
• <img src="url" alt="alternatetext“ width=“10px”
height=“10px“ style=“float:right”>
Cont…
• HTML Video
• <video width="320" height="240" autoplay controls>
<source src="movie.mp4" type="video/mp4">
</video>
• The controls attribute adds video controls, like play, pause,
and volume.
• To start a video automatically, use the autoplay attribute:
• Add muted after autoplay to let your video start playing
automatically (but muted):
• HTML Audio
• <audio height=“” width=“” autoplay controls>
• <source src="horse.mp3" type="audio/mpeg">
• </audio>
HTML Lists
• Unordered list
• An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
• <ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
Cont.…..
• Ordered list
• A type attribute can be added to an ordered list, to define the
type of the marker:
• <ol type="1">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
Cont.…..
• Description list
• A description list, is a list of terms, with a description of each
term.
• The <dl> tag defines a description list.
• The <dt> tag defines the term (name), and the <dd> tag defines
the data (description).
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• <table>
<tr>
<th>Name</th> -
<th>ID</th>
<th>Dept</th>
</tr>
<tr>
<td>Dereje Abebe</td>
<td>NSR/0231/20</td>
<td>IS</td>
</tr>
<tr>
<td>Elsa Getachew</td>
<td>GSR/3454/20</td>
<td>CS</td>
</tr>
</table>
Cont…
• Table border
• Border:
• Border-collapse:
• Border-style:(dotted, dashed, solid, double, groove, ridge….
• Border-color:
• Table Caption
• You can add a caption that serves as a heading for the entire table.
• Header for Multiple Columns
• You can have a header that spans over two or more columns.
• To do this, use the colspan attribute on the <th> element
• Header for Multiple rows
To make a cell span over multiple rows, use the rowspan attribute:
The value of the rowspan attribute represents the number of rows
to span.
Summary
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link
goes to
• The src attribute of <img> specifies the path to the image to be
displayed
• The width and height attributes of <img> provide size
information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as
color, font, size, and more
• The lang attribute of the <html> tag declares the language of the
Web page
• The title attribute defines some extra information about an
element
Cont…
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
Cont…
• Use the <a> element to define a link
• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked document
• Use the <img> element (inside <a>) to use an image as a link
• Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark
• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if
it cannot be displayed
• Use the HTML width and height attributes or the CSS width and
height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the
right
Chapter Three
Part Two
HTML Forms
• HTML form
• HTML forms are used to collect user input.
• <form>
• </form>
Cont…
• From elements
• Text
• Select
• Password
• Radio
• Checkbox
• textarea
• Number
• <input type="number" name="quantity" min="1" max="5">
• Date
• <input type="date" name="bday">
• Color
• <input type="color" name="favcolor">
• button
Cont…
• Attributes
• The value attribute specifies the initial value for an input field
• The readonly attribute specifies that the input field is read only
(cannot be changed)
• <input type="text" name="firstname" value="John" readonly>
• The disabled attribute specifies that the input field is disabled
• The maxlength attribute specifies the maximum allowed
length for the input field
• The size attribute specifies the size (in characters) for the input
field

Chapter Three Part I

Uploaded by

Copyright:

Available Formats

Chapter Three Part I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter Three Part I

Uploaded by

Copyright:

Available Formats

Chapter Three

• A language for describing a web page (layout and

• A markup language is a set of markup tags.

• The tags describe document content.

• HTML documents contain HTML tags and plain text.

• HTML documents are also called web pages.

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

• HTML tags normally come in pairs.

<h1>My First Heading</h1>

<p>My first paragraph.</p>

• <h1 style="background-color:powderblue;">This is a heading</h1>

You might also like