Introduction to HTML academy.zariba.com 1. Lecture Content 1.What is HTML? 2.The HTML Tag 3.Most popular HTML tags 2

1

Introduction to HTML

academy.zariba.com

2

Lecture Content

1. What is HTML?2. The HTML Tag3. Most popular HTML tags

3

What is HTML?

• HTML – Hyper Text Markup Language

• Describes the document structure and formatting

• You can think of HTML page as a Word document

• An HTML document consists of many tags, which have different attributes – size, color, etc.

4

The HTML Tag

• Tags 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>

5

Most Popular HTML tags

<b></b> bold<i></i> italicized<u></u> underlined<sup></sup> Samplesuperscript

<sub></sub> Samplesubscript

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

6

Other HTML tags

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

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.

8

References

9

Zariba Academy

Questions

Documents

Introduction to HTML academy.zariba.com 1. Lecture Content 1.What is HTML? 2.The HTML Tag 3.Most popular HTML tags 2