HTML tutorial

1
Web Page development using html

• Introduction to HTML

Prepared by Yonas D. BSc in Computer Science
and TVET(Level I and IV)
2
Web Browsers

• The purpose of a web browser (Chrome, Edge,
  Firefox,Safari) is to read HTML documents and
  display them correctly.
• A browser does not display the HTML tags, but
  uses them to determine how to display the
  document

3
What is Html ?

• HTML is used to design Web pages
• A language used to format text and objects (such
  as images) to be displayed in a Web browser.
• An HTML file must have an htm or html file
  extension.
• HTML is a markup language

• Special formatting codes (called tags) to adjust
  fonts,ltbgtlt/bgt ,ltpgtlt/pgt,, display images ltimg
  srcpath gt, create tables lttablegtlt/tablegt, etc.

4
What is an HTML Element?

• An HTML element is defined by a start tag, some
  content, and an end tag
• lttagname gtContent goes here... lt/tagname gt
• 
  lth1 gtMy First Heading lt/h1 gt
• ltp gtMy first paragraph. lt/p gt

Start tag Elements content End tag
lth1gt My first heading lt/h1gt
ltpgt My first paragraph lt/pgt
ltbrgt None None
5
HTML Attributes

• All HTML elements can have attributes
• Attributes provide additional information about
  elements
• Attributes are always specified in the start tag
  Attributes usually come in name/value pairs
  likename"value
• lth1 Style color white gtMy First Heading
  lt/h1 gt

6
A Simple HTML Document

• Example
• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• lttitlegtPage Titlelt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

3
2
1
? Browsers ignore all extra spaces
Content goes here...
4
7
HTML Headings

• HTML headings are titles or subtitles that you
  want todisplay on a webpage.
• Example

Displayed by the browser
!DOCTYPE htmlgt lthtmlgt ltheadgt lttitlegtHeadinglt/title
gt lt/headgt ltbodygt ltH1gtHeading 1lt/H1gt ltH2gtHeading
2lt/H2gt ltH3gtHeading 3lt/H3gt ltH4gtHeading
4lt/H4gt ltH5gtHeading 5lt/H5gt ltH6gtHeading
6lt/H6gt lt/bodygt lt/htmlgt
8
Two parts
Source Code
Display
lt!DOCTYPE htmlgt lthtmlgt ltheadgt lttitlegtMy First
Webpagelt/titlegt lt/headgt ltbodygt lth1gtMy
Websitelt/h1gt ltpgtWelcome to my first web page. I
am writing this page using a text
editorlt/pgt ltolgt ltli style"color orange"gt???
Technologylt/ligt ltligtlta href"www.Facebook.com"gt
FaceBooklt/agtlt/ligt ltligtlta href"www.Email.com"gtE
maillt/agtlt/ligt lt/olgt lt/bodygt lt/htmlgt

• Text/HTML editor
• HTML files are flat-text files that
• have a .html (or .htm) extension.

Browser When you open an HTML file with a
browser, the code is run.
9

• a

10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)