1 Lecture Content What is HTML The HTML Tag Most popular HTML tags 2 3 What is HTML HTML Hyper Text Markup Language Describes the document structure and formatting You can think of HTML page as a ID: 757592
Download Presentation The PPT/PDF document "Introduction to HTML a cademy.zariba.co..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Introduction to HTML
academy.zariba.com
1Slide2
Lecture Content
What is HTML?The HTML Tag
Most popular HTML tags
2Slide3
3
What is HTML?
HTML –
Hyper Text Markup Language
Describes the document
structure
and
formatting
You can think of HTML page as a
Word documentAn HTML document consists of many tags, which have different attributes – size, color, etc.Slide4
The HTML Tag
4Tags
are the building blocks in an HTML document
Each tag starts with “<” and ends with “>”
There are two types –
opening
and
closing
e.g. <body><h1> Bunny Website </h1></body>There are self-closing tags e.g. <
hr
/> or <
br
/>
Attributes
are properties of HTML elements. They are used to set size, color, border, alignment, etc.
e.g. <span color=“red”>
This is red.
</span>
Some attributes are
common
for every HTML element
e.g. id, class, name, style, etc.
Some are
specific
e.g. <
img
src
=“picture.png”/> , <a
href
=“
somelink
”>Click</a>Slide5
Most Popular HTML tags
5
<b></b>
bold
<i></i>
italicized
<u></u>
underlined
<sup></sup>
Sample
superscript
<sub></sub>
Sample
subscript
<strong></strong>
strong
<em></em>
emphasized
<pre></pre>Preformatted text<a></a>hyperlink
<img />image<br/>new line<h1></h1>heading<p></p>paragraph<div></div>section<span></span>section<ul></ul>unordered list<ol></ol>ordered list<li></li>list itemSlide6
Other HTML tags
6
<dl></dl>
definition list
<dt></dt>
definition term
<dd></dd>
definition
<table></table>
table
<tr></tr>
table row
<td></td>
table data
<form></form>
form
<input></input>
emphasizedSlide7
7
Homework
Create a simple Bunny breeds website. The main page should consist of a list with 3 bunny breeds. When clicking on a bunny breed you should be redirected to a new page with the bunny breed as a title, pictures and some information. Try to use different tags.Slide8
8
ReferencesSlide9
9
Zariba Academy
Questions