KEMBAR78
CHAPTER 2_ Get Started with HTML Module | PPTX
WELCOME TO
LEARN at FLIGNO
2
HTML & CSS BASICS
CHAPTER 2: GET STARTED WITH HTML
LOGO
3
CHAPTER 2: GET STARTED WITH HTML
Learning Objectives
At the end of this chapter you should be able:
1. Learn HTML basic syntax on creating an HTML file
2. Learn HTML basic elements and tags
3. Learn about nesting HTML elements
4. Learn basic HTML attributes
LESSON 1
HTML SYNTAX
5
HTML SYNTAX
HTML Syntax
HTML is used to create web pages and web applications.
● The <!DOCTYPE> Declaration
● HTML Headings
● Web Browsers
● HTML page structure
Main Topic
6
HTML SYNTAX
The <!DOCTYPE>
Declaration
Is a declaration that
tells the browser what
version of HTML the
document is written in.
SubTopic
HTML View
7
HTML SYNTAX
HTML page structure
The <html>, <head>,
<title> and <body> tags
make up the basic
skeleton of every web
page.
SubTopic
LESSON 2
HTML ATTRIBUTES
9
HTML ATTRIBUTES
About HTML Attributes
Attributes usually come in name/value pairs like: name="value"
● The href Attribute
● The src Attribute
● The width and height Attributes
● The alt Attribute
Main Topic
10
HTML ATTRIBUTES
The href Attribute
The <a> tag defines a
hyperlink. The href
attribute specifies the
URL of the page the
link goes to.
SubTopic
HTML View
11
HTML ATTRIBUTES
The href Attribute
The <a> tag defines a
hyperlink. The href
attribute specifies the
URL of the page the
link goes to.
SubTopic
Web View
12
HTML ATTRIBUTES
The src Attribute
The <img> tag is used
to embed an image in
an HTML page. The src
attribute specifies the
path to the image to
be displayed.
SubTopic
HTML View
13
HTML ATTRIBUTES
The src Attribute
The <img> tag is used
to embed an image in
an HTML page. The src
attribute specifies the
path to the image to
be displayed.
SubTopic
Web View
14
HTML ATTRIBUTES
The width and height
Attributes
The <img> tag should
also contain the width
and height attributes,
which specify the
width and height of the
image (in pixels).
SubTopic
HTML View
15
HTML ATTRIBUTES
The width and height
Attributes
The <img> tag should
also contain the width
and height attributes,
which specify the
width and height of the
image (in pixels).
SubTopic
Web View
16
HTML ATTRIBUTES
The alt Attribute
The required alt
attribute for the <img>
tag specifies an
alternate text for an
image, if the image for
some reason cannot be
displayed.
SubTopic
HTML View
17
HTML ATTRIBUTES
The alt Attribute
The required alt
attribute for the <img>
tag specifies an
alternate text for an
image, if the image for
some reason cannot be
displayed.
SubTopic
Web View
LESSON 3
HTML ELEMENTS AND TAGS
19
HTML ELEMENTS AND TAGS
HTML Elements
An element in HTML usually consists of a start tag (or opening
tag) <tag name>, end tag (or closing tag) </tag name> and
content inserted between them.
Main Topic
20
HTML ELEMENTS AND TAGS
HTML Element
● opening tag
● content
● closing tag
SubTopic
21
HTML ELEMENTS AND TAGS
Nesting Html
Elements
1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>
5. <p>
SubTopic
HTML View
1
2
3
4
5
22
HTML ELEMENTS AND TAGS
HTML Headings
Defines a large
heading
SubTopic
HTML View
Any Questions?

CHAPTER 2_ Get Started with HTML Module

  • 1.
  • 2.
    2 HTML & CSSBASICS CHAPTER 2: GET STARTED WITH HTML LOGO
  • 3.
    3 CHAPTER 2: GETSTARTED WITH HTML Learning Objectives At the end of this chapter you should be able: 1. Learn HTML basic syntax on creating an HTML file 2. Learn HTML basic elements and tags 3. Learn about nesting HTML elements 4. Learn basic HTML attributes
  • 4.
  • 5.
    5 HTML SYNTAX HTML Syntax HTMLis used to create web pages and web applications. ● The <!DOCTYPE> Declaration ● HTML Headings ● Web Browsers ● HTML page structure Main Topic
  • 6.
    6 HTML SYNTAX The <!DOCTYPE> Declaration Isa declaration that tells the browser what version of HTML the document is written in. SubTopic HTML View
  • 7.
    7 HTML SYNTAX HTML pagestructure The <html>, <head>, <title> and <body> tags make up the basic skeleton of every web page. SubTopic
  • 8.
  • 9.
    9 HTML ATTRIBUTES About HTMLAttributes Attributes usually come in name/value pairs like: name="value" ● The href Attribute ● The src Attribute ● The width and height Attributes ● The alt Attribute Main Topic
  • 10.
    10 HTML ATTRIBUTES The hrefAttribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to. SubTopic HTML View
  • 11.
    11 HTML ATTRIBUTES The hrefAttribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to. SubTopic Web View
  • 12.
    12 HTML ATTRIBUTES The srcAttribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed. SubTopic HTML View
  • 13.
    13 HTML ATTRIBUTES The srcAttribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed. SubTopic Web View
  • 14.
    14 HTML ATTRIBUTES The widthand height Attributes The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels). SubTopic HTML View
  • 15.
    15 HTML ATTRIBUTES The widthand height Attributes The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels). SubTopic Web View
  • 16.
    16 HTML ATTRIBUTES The altAttribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. SubTopic HTML View
  • 17.
    17 HTML ATTRIBUTES The altAttribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. SubTopic Web View
  • 18.
  • 19.
    19 HTML ELEMENTS ANDTAGS HTML Elements An element in HTML usually consists of a start tag (or opening tag) <tag name>, end tag (or closing tag) </tag name> and content inserted between them. Main Topic
  • 20.
    20 HTML ELEMENTS ANDTAGS HTML Element ● opening tag ● content ● closing tag SubTopic
  • 21.
    21 HTML ELEMENTS ANDTAGS Nesting Html Elements 1. <!DOCTYPE> 2. <html> 3. <body> 4. <h1> 5. <p> SubTopic HTML View 1 2 3 4 5
  • 22.
    22 HTML ELEMENTS ANDTAGS HTML Headings Defines a large heading SubTopic HTML View
  • 23.

Editor's Notes

  • #8 The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • #23 2. Paragraph Element - <p> 3. Formatting Element: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text (same on italic) <mark> - Marked text (Parang highlighted) <small> - Smaller text <del> - Deleted text (strike a line) <ins> - Inserted text (underline text) <sub> - Subscript text (char below line) <sup> - Superscript text (footnote) 4. HTML Quotation: In this chapter we will go through the <blockquote> - quoted from other source, <q> - short quotation, <abbr>- abbrevation, <address>- information of a document, <cite> - title of a creative work (book,poem,song), and <bdo>- Bi-Directional Override used override the current text direction. 5. Table - HTML tables allow to arrange data into rows and columns.