Scribd
Upload
21 views14 pages

Chapter Two

The document discusses the basics of HTML including tags, elements, attributes, headings, paragraphs, lists, links, forms, images, video and audio. It covers the structure of HTML documents and many fundamental HTML components.

Uploaded by

tayeanimaw7
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
21 views14 pages

Chapter Two

The document discusses the basics of HTML including tags, elements, attributes, headings, paragraphs, lists, links, forms, images, video and audio. It covers the structure of HTML documents and many fundamental HTML components.

Uploaded by

tayeanimaw7
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/ 14

Chapter Three

HTML
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>
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>

• HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• Horizontal Line
• <hr> creates a horizontal line
• Line Breaks
• Preserve Formatting
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
Cont.….
• 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 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>
Cont.….
• HTML Links – Hyperlinks
• A hyperlink is an element, a text, or an image that you can click
on, and jump to another document.
• links are defined with the <a> tag:
• Href
• Target {_blank, _self, etc ….}
• HTML bookmarks are used to allow readers to jump to specific
parts of a Web page.
• 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
Cont.……
• Image
• <img src=“” alt=“” height=“” width=“”/>
• Video
• <video height=“” width=“” autoplay controls>
• <source src=“” type=“”/>
• </video>
• Audio
• <audio height=“” width=“” autoplay controls>
• <source src=“” type=“”/>
• </audio>

You might also like