Scribd
Upload
22 views35 pages

Chapter Three Part I

Uploaded by

beshahashenafi32
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
22 views35 pages

Chapter Three Part I

Uploaded by

beshahashenafi32
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/ 35

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.
• <!-- Write your comments here -->
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

You might also like