An Introduction to HTML

1
iFour Consultancy
https//www.ifourtechnolab.com/
2
Introduction To HTML

• A markup language is a set of markup tags

• A markup language is a set of markup tags

• What Is HTML?
• Markup language for describing web pages
• HTML stands for Hyper Text Markup Language, a
  language with set of markup tags
• Documents are described by HTML tags
• Each HTML tag describes different document
  content

https//www.ifourtechnolab.com/
3
Creating HTML Pages

• An HTML file must have an .htm or .html file
  extension
• HTML files can be created with text editors
• NotePad, NotePad , PSPad
• Or HTML editors (WYSIWYG Editors)
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Microsoft Word
• Visual Studio

https//www.ifourtechnolab.com/
4
HTML Structure

• HTML is comprised of elements and tags
• Begins with lthtmlgt and ends with lt/htmlgt
• Elements (tags) are nested one inside another
• Tags have attributes
• HTML describes structure using two main sections
  ltheadgt and ltbodygt

lthtmlgt ltheadgtlt/headgt ltbodygtlt/bodygt lt/htmlgt
ltimg src"logo.jpg" alt"logo" /gt
https//www.ifourtechnolab.com/
5
HTML Code Formatting

• The HTML source code should be formatted to
  increase readability and facilitate debugging
• Every block element should start on a new line
• Every nested (block) element should be indented
• Browsers ignore multiple whitespaces in the page
  source, so formatting is harmless
• For performance reasons, formatting can be
  sacrificed

https//www.ifourtechnolab.com/
6
First HTML Page
Test.html
lt!DOCTYPE HTMLgt lthtmlgt ltheadgt lttitlegtMy
First HTML Pagelt/titlegt lt/headgt ltbodygt
ltpgtThis is some text...lt/pgt lt/bodygt lt/htmlgt
https//www.ifourtechnolab.com/
7
First HTML Page Tags

• An HTML element consists of an opening tag, a
  closing tag and the content inside.

Opening tag
lt!DOCTYPE HTMLgt lthtmlgt ltheadgt lttitlegtMy
First HTML Pagelt/titlegt lt/headgt ltbodygt
ltpgtThis is some text...lt/pgt lt/bodygt lt/htmlgt
Closing tag
https//www.ifourtechnolab.com/
8
First HTML Page Header
lt!DOCTYPE HTMLgt lthtmlgt ltheadgt lttitlegtMy
First HTML Pagelt/titlegt lt/headgt ltbodygt
ltpgtThis is some text...lt/pgt lt/bodygt lt/htmlgt
HTML header
https//www.ifourtechnolab.com/
9
First HTML Page Body
lt!DOCTYPE HTMLgt lthtmlgt ltheadgt lttitlegtMy
First HTML Pagelt/titlegt lt/headgt ltbodygt
ltpgtThis is some text...lt/pgt lt/bodygt lt/htmlgt
HTML body
https//www.ifourtechnolab.com/
10
Some Simple Tags

• Hyperlink tags
• Image tags
• Text formatting tags

lta href"http//www.telerik.com/"
title"Telerik"gtLink to Telerik Web sitelt/agt
ltimg src"logo.gif" alt"logo" /gt
This text is ltemgtemphasized.lt/emgt ltbr /gtnew
lineltbr /gt This one is ltstronggtmore
emphasized.lt/stronggt
https//www.ifourtechnolab.com/
11
Tags Attributes

• Tags can have attributes
• Attributes specify properties and behavior
• Example
• Few attributes can apply to every element
• Id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint
  when the element is hovered with the mouse
• Some elements have obligatory attributes

Attribute alt with value "logo"
ltimg src"logo.gif" alt"logo" /gt
https//www.ifourtechnolab.com/
12
Headings and Paragraphs

• Heading Tags (h1 h6)
• Paragraph Tags
• Sections div and span

lth1gtHeading 1lt/h1gt lth2gtSub heading 2lt/h2gt lth3gtSub
heading 3lt/h3gt
ltpgtThis is my first paragraphlt/pgt ltpgtThis is my
second paragraphlt/pgt
ltdiv style"background skyblue"gt This is a
divlt/divgt
https//www.ifourtechnolab.com/
13
The lt!DOCTYPEgt Declaration

• HTML documents must start with a document type
  definition (DTD)
• It tells web browsers what type is the served
  code
• Possible versions HTML 4.01, XHTML 1.0
  (Transitional or Strict), XHTML 1.1, HTML 5
• Example
• See http//w3.org/QA/2002/04/valid-dtd-list.html
  for a list of possible doctypes

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt
https//www.ifourtechnolab.com/
14
The ltheadgt Section

• Contains information that doesnt show directly
  on the viewable page
• Starts after the lt!doctypegt declaration
• Begins with ltheadgt and ends with lt/headgt
• Contains mandatory single lttitlegt tag
• Can contain some other tags, e.g.
• ltmetagt
• ltscriptgt
• ltstylegt
• lt!- comments --gt

https//www.ifourtechnolab.com/
15
ltheadgt Section lttitlegt tag

• Title should be placed between ltheadgt and lt/headgt
  tags
• Used to specify a title in the window title bar
• Search engines and people rely on titles

lttitlegtiFour consultancy Sustainable Solution
lt/titlegt
https//www.ifourtechnolab.com/
16
The ltbodygt Section

• The ltbodygt section describes the viewable portion
  of the page
• Starts after the ltheadgt lt/headgt section
• Begins with ltbodygt and ends with lt/bodygt

lthtmlgt ltheadgtlttitlegtTest pagelt/titlegtlt/headgt
ltbodygt lt!-- This is the Web page body --gt
lt/bodygt lt/htmlgt
https//www.ifourtechnolab.com/
17
Text Formatting

• Text formatting tags modify the text between the
  opening tag and the closing tag
• Ex. ltbgtHellolt/bgt makes Hello bold

ltbgtlt/bgt bold
ltigtlt/igt italicized
ltugtlt/ugt underlined
ltsupgtlt/supgt Samplesuperscript
ltsubgtlt/subgt Samplesubscript
ltstronggtlt/stronggt strong
ltemgtlt/emgt emphasized
ltpregtlt/pregt Preformatted text
ltblockquotegtlt/blockquotegt Quoted text block
ltdelgtlt/delgt Deleted text strike through
https//www.ifourtechnolab.com/
17
18
Hyperlinks ltagt Tag

• Link to a document called form.html on the same
  server in the same directory
• Link to a document called parent.html on the same
  server in the parent directory
• Link to a document called cat.html on the same
  server in the subdirectory stuff

lta href"form.html"gtFill Our Formlt/agt
lta href"../parent.html"gtParentlt/agt
lta href"stuff/cat.html"gtCataloglt/agt
https//www.ifourtechnolab.com/
19
Images ltimggt tag

• Inserting an image with ltimggt tag
• Image attributes
• Example

ltimg src"/img/basd-logo.png"gt
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
ltimg src"./php.png" alt"PHP Logo" /gt
https//www.ifourtechnolab.com/
19
20
Block and Inline Elements

• Block elements add a line break before and after
  them
• ltdivgt is a block element
• Other block elements are lttablegt, lthrgt, headings,
  lists, ltpgt and etc.
• Inline elements dont break the text before and
  after them
• ltspangt is an inline element
• Most HTML elements are inline, e.g. ltagt

https//www.ifourtechnolab.com/
21
The ltdivgt Tag

• ltdivgt creates logical divisions within a page
• Block style element
• Used with CSS
• Example

div-and-span.html
ltdiv style"font-size24px colorred"gtDIV
examplelt/divgt ltpgtThis one is ltspan
style"colorred font-weightbold"gtonly a
testlt/spangt.lt/pgt
https//www.ifourtechnolab.com/
22
The ltspangt Tag

• Inline style element
• Useful for modifying a specific portion of text
• Don't create a separate area (paragraph) in the
  document
• Very useful with CSS

span.html
ltpgtThis one is ltspan style"colorred
font-weightbold"gtonly a testlt/spangt.lt/pgt ltpgtThis
one is another ltspan style"font-size32px
font-weightbold"gtTESTlt/spangt.lt/pgt
https//www.ifourtechnolab.com/
23
HTML Tables

• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags
• lttablegtlt/tablegt begin / end the table
• lttrgtlt/trgt create a table row
• lttdgtlt/tdgt create tabular data (cell)
• Tables should not be used for layout. Use CSS
  floats and positioning styles instead

https//www.ifourtechnolab.com/
24
Form Fields

• Single-line text input fields
• Multi-line textarea fields
• Hidden fields contain data not shown to the user
• Often used by JavaScript code

ltinput type"text" name"FirstName" value"This
is a text field" /gt
lttextarea name"Comments"gtThis is a multi-line
text fieldlt/textareagt
ltinput type"hidden" name"Account" value"This
is a hidden text field" /gt
https//www.ifourtechnolab.com/
25
HTML Summary

• HTML is the universal markup language for the Web
• HTML lets you format text, add graphics, create
  links, input forms, frames and tables, etc., and
  save it all in a text file that any browser can
  read and display
• The key to HTML is the tags, which indicates what
  content is coming up

https//www.ifourtechnolab.com/
26
HTML5

• DOCTYPE declaration for HTML5 is very simple
• Use lt!DOCTYPE htmlgt instead of lt!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
  "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"gt
• It uses UTF-8 and you define it with just one
  meta tag ltmeta charset"UTF-8"gt
• HTML5 new Supported Application Programming
  Interfaces
• Geolocation - Now visitors can choose to share
  their physical location with your web application
• Drag and drop - Drag and drop the items from one
  location to another location on a the same
  webpage.
• Persistent Local Storage - To achieve without
  resorting to third-party plug-ins.
• Web Workers - A next-generation bidirectional
  communication technology for web applications.
• Server-Sent Events - HTML5 introduces events
  which flow from web server to the web browsers
  and they are called Server-Sent Events (SSE)

https//www.ifourtechnolab.com/
27
HTML5

• Removed Elements in HTML5

Removed Element Use Instead
ltfontgt CSS
ltframegt
ltframesetgt
ltnoframesgt
ltstrikegt CSS, ltsgt, or ltdelgt
ltttgt CSS
Removed Element Use Instead
ltacronymgt ltabbrgt
ltappletgt ltobjectgt
ltbasefontgt CSS
ltbiggt CSS
ltcentergt CSS
ltdirgt ltulgt
https//www.ifourtechnolab.com/
28
HTML5

• New Semantic/Structural Elements in HTML5

Element Description
ltarticlegt Defines an article in the document
ltasidegt Defines content aside from the page content
ltbdigt Defines a part of text that might be formatted in a different direction from other text
ltdetailsgt Defines additional details that the user can view or hide
ltdialoggt Defines a dialog box or window
ltfigcaptiongt Defines a caption for a ltfiguregt element
ltfiguregt Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
ltfootergt Defines a footer for the document or a section
ltheadergt Defines a header for the document or a section
ltmaingt Defines the main content of a document
https//www.ifourtechnolab.com/
29
HTML5

• New Form Elements in HTML5

Element Description
ltdatalistgt Defines pre-defined options for input controls
ltkeygengt Defines a key-pair generator field
ltoutputgt Defines the result of a calculation
https//www.ifourtechnolab.com/
30
HTML5
Element Description
ltmarkgt Defines marked or highlighted text
ltmenuitemgt Defines a command/menu item that the user can invoke from a popup menu
ltmetergt Defines a scalar measurement within a known range (a gauge)
ltnavgt Defines navigation links in the document
ltprogressgt Defines a dialog box or window
ltrpgt Defines what to show in browsers that do not support ruby annotations
ltrtgt Defines an explanation/pronunciation of characters
ltrubygt Defines a ruby annotation
ltsectiongt Defines a section in the document
ltsummarygt Defines a visible heading for a ltdetailsgt element
lttimegt Defines a date/time
https//www.ifourtechnolab.com/
31
HTML5

• New Graphics Media Elements in HTML5

Element Description
ltcanvasgt Draw graphics, on the fly, via scripting
ltsvggt Draw scalable vector graphics
ltaudiogt Defines sound content
ltembedgt Defines containers for external applications
ltsourcegt Defines tracks for ltvideogt and ltaudiogt
lttrackgt Defines tracks for ltvideogt and ltaudiogt
ltvideogt Defines video or movie content
https//www.ifourtechnolab.com/
32
HTML5

• New Input Types in HTML5
• Input Types color,date,datetime,datetime-local,em
  ail,month,number,range,search,tel,time,url,week
• InputAttributeautocomplete,autofocus,form,formact
  ion,formenctype,formmethod,formnovalidate,formtarg
  et,height and width, list, multiple, min and max,
  placeholder, step, required
• New syntax in HTML5
• This example demonstrates the different syntaxes
  used in an ltinputgt tag
• Empty ltinput type"text"
  value"John" disabledgt
• Unquoted ltinput type"text" valueJohngt
• Double-quoted ltinput type"text" value"John
  Doe"gt
• Single-quoted ltinput type"text" value'John
  Doe'gt
• In HTML5, all four syntaxes may be used,
  depending on what is needed for the attribute.

https//www.ifourtechnolab.com/
33

• Thank You..

https//www.ifourtechnolab.com/