Scribd
Upload
46 views10 pages

HTML Basics (l0)

The document discusses the basics of HTML syntax and tags, explaining that HTML5 uses the simple DOCTYPE of <!DOCTYPE html> and older versions had more complex DOCTYPEs. It also introduces several common HTML tags like <bold> and <italic> that can be nested and attributes that tags can have. The document provides examples of basic HTML programs that include headings, paragraphs, and images to demonstrate using various tags.

Uploaded by

Andrees Chattha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views10 pages

HTML Basics (l0)

The document discusses the basics of HTML syntax and tags, explaining that HTML5 uses the simple DOCTYPE of <!DOCTYPE html> and older versions had more complex DOCTYPEs. It also introduces several common HTML tags like <bold> and <italic> that can be nested and attributes that tags can have. The document provides examples of basic HTML programs that include headings, paragraphs, and images to demonstrate using various tags.

Uploaded by

Andrees Chattha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML5 Syntax

1. DOCTYPEs in older versions of HTML were longer


because the HTML language was SGML based
and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify
DOCTYPE as follows:
<!DOCTYPE html> Specifies the document type and
is case-insensitive.
Introduction to Marker/Tag 1
To describe a hypertext file, the HTML language inserts tags into
the text of the document:

<Marker> here your text </Marker>


Start End

Tag, Marker, element To identify different type of Text


Introduction to Marker-2
These tags can be inserted anywhere in the text, between 2 sentences, words, letters...

How are you <bold>How you you</bold>

How are you <bold>How <italic> you </italic> you</bold>


Introduction to Marker 3
It is necessary to respect a nesting logic:

good:

<bold><italic> How are you </italic> </bold>

bad:

<bold><italic> How are you </bold></italic>


Introduction to Marker 4

• HTML is case sensitive, always write in lowercase.

good:

<bold><italic> How are you</italic> </bold>


bad:
<BOLD><italic> How are you </italic> </BOLD>

<BOLD><ITALIC> How are you </ITALIC> </Bold>


The Attributes
Tags can have one or more attributes that specify the action of the tag. Always enclose the
attribute value in quotes.

<marker attribute="argument">text</marker>

<marker attribut1="argument" attribute2="argument">texte</marker>


Structure of HTML Source Code
<html>

<head>
… <title> My name is l</title>
</head>
<body>
Hello
</body>
</html>

A tag. <html> contains only one <head> and one body <body>.

The tags that we will find in the body divide the content into logical sections, in the form of blocks (paragraphs,
tables, etc.). These are called block-level elements.

Elements that represent text properties (strong, bold) that appear in a block are called "line elements".
HTML Program Examples

Program 2:Specify headings for the content


Program 1:A simple HTML document <!DOCTYPE html>
<html lang="en">
<!DOCTYPE html> <head>
<html lang="en"> <meta charset="UTF-8">
<head> <title>Example of HTML headings tag</title>
<title>Simple HTML document</title> </head>
</head> <body>
<body> <h1>Heading level 1</h1>
<h1>Hello World!</h1> <h2>Heading level 2</h2>
</body> <h3>Heading level 3</h3>
</html> <h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</body>
</html>
Program 4:Inserting paragraphs of text content Output
<!DOCTYPE html> This is a paragraph.
<html lang="en">
<head> This is another paragraph.
<title>Creating Paragraphs in HTML</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Program 5:Inserting images into the HTML document Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Placing Images in HTML Documents</title>
</head>
<body>
<img src="/examples/images/kites.jpg" alt="Flying Kites">
<img src="/examples/images/sky.jpg" alt="Cloudy Sky">
<img src="/examples/images/balloons.jpg" alt="Hot Air Balloons">
</body>
</html>

You might also like