HTML Hyper Text Markup Language

HTML Hyper Text Markup Language

HTML HTML is a language for describing web pages
HTML stands for Hyper Text Markup Language A markup language is a collection of markup tags HTML Specifies the format of the text that is displayed in a Web browser. HTML markup contains Text that represents the content of a document and Elements that specify a document's structure.

HTML The browser does not display the HTML tags, but uses the tags to interpret the content of the page HTML contains commands - called tags to make text as Headings Paragraphs Lists Quotations Emphasized More...

Version Year HTML Versions HTML 1991 HTML 2.0 1995 HTML 3.2 1997
1999 XHTML 2000 HTML5 2014

Create a simple HTML file - Basic 3 Steps
Create HTML files by type HTML codes in a Text Editor: Notepad, Notepad++, WordPad, Geditor, Sublime Text Editor After save them by giving a file name with either an .html or .htm extension Ex. about.html contact.html index.html After Saving that file, open file using a Web browser like Chrome, Firefox etc..

Basic Syntax of a HTML file
<!DOCTYPE html> <html> <head> <title> Web Technologies </title> </head> <body> Welcome to <b> HTML </b> technology </body> </html> save as “index.html”

Explanation <!DOCTYPE html> is your first line in your document for HTML 5. The first tag in your HTML document is <html> Start of an HTML document The last tag in your document is </html> The end of the HTML document The text between the <head> tag and the </head> tag is header information Not displayed in the browser window The text between the <title> tags is the title of your document Displayed in your browser's caption

Explanation (contd.) The text between the <body> tags is the text that will be displayed in your browser Visible page contains The text between the <b> and </b> tags will be displayed in a bold font

The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly There are different document types on the web. To display a document correctly The browser must know both type and version HTML 4.01- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML5 – <!DOCTYPE html>

E.g. <html> <title> <body> <b> <i>
HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: < > E.g. <html> <title> <body> <b> <i> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag (opening tag), the second tag (closing tag) is the end tag The end tag is written like the start tag, but with a slash ( / ) before the tag name

<tag_name attribute = "Value">
HTML Tag Explanation <tag_name attribute = "Value"> < body bgcolor = "red"> HTML 4 Most tags can have multiple attributes and values simulteneously <p align= "center" color= "blue" >

HTML Attributes All HTML elements can have attributes
Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: <tagname name="value“ >

Some Examples for HTML Pair Tags
Opening tags Closing tags <html> <body> <head> <title> <b> <i> <h1> <strong> <ul> </html> </body> </head> </title> </b> </i> </h1> </strong> </ul>

<img> <hr> <br> <input>
HTML Tags without closing tags. <img> <hr> <br> <input>

<article> <aside> <audio>
HTML 5 New Tags Basic Layout Tags <article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <ruby> <section> <time> <video> <wbr> <header> <summary> <figcaption>

HTML 4 Tags Removed from HTML 5
<acronym> <applet> <basefont> <center> <dir> <font> <frame> <big> <frameset> <isindex> <noframes> <s> <strike> <tt> <u>

<tagname style="property: value;"> Ex:
HTML Style Attribute Setting the style of an HTML 5 element, can be done with the style attribute. The HTML style attribute has the following syntax: <tagname style="property: value;"> Ex: <p style=“color: red;"> <p style="color: red; text-align:center"> The property is a CSS property. The value is a CSS value. (HTML 5)

Background Color This is a heading
The CSS background-color property defines the background color for an HTML element. This example sets the background color for a page to blue: <body style="background-color:blue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> This is a heading This is a paragraph.

<p> HTML Paragraphs
HTML paragraphs are defined with the <p> tag: <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is also a </p> <p> paragraph.</p> This is a paragraph. This is another paragraph. This is also a Paragraph

<p> HTML Paragraphs - Attributes
Alignment Color Size Font Face Text Alignment <p style=“text-align:left”> This is a paragraph.</p> <p style=“text-align:right”> This is a paragraph.</p> <p style=“text-align:centre”> This is a paragraph.</p> <p style=“text-align:justify”> This is a paragraph.</p>

Alignment Color Size Font Face Text Color <p style=“color:red”> This is a paragraph.</p> <p style=“color:#ff0000”> This is a paragraph.</p> <p style=“color:RGB(255,0,0)”> This is a paragraph.</p>

Alignment Color Size Font Face Font Size <p style=“font-size:40px”> This is a paragraph.</p> <p style=“font-size:40%”> This is a paragraph.</p>

Alignment Color Size Font Face Font Face <p style="font-family: Arial"> This is a paragraph.</p>

<h1> - <h6> This is heading 1 HTML Headings
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading or Big Heading, <h6> defines the least important heading or Small Heading. <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

<hr> <hr> HTML Horizontal Rules - HR
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page: <p>This is some text.</p> <hr> <p>This is some other text.</p> This is some text. This is some other text.

<br> HTML Line Break
The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph: <p>This is<br>a paragraph<br><br>with line breaks</p> This is a paragraph with line breaks

<pre> The HTML <pre> Element
The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: <pre> This is a pre formatted Paragraph. Very useful For Poem writing etc. </pre> This is a pre formatted Paragraph. Very useful For Poem writing etc.

This is a heading Multiple styles in a Text
We can use Multiple attributes at a time <h1 style="text-align:center; color:red; font-family: ‘Courier New’”> Centered Heading </h1> This is a heading

HTML Text Formatting Elements
HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:

<strong> - Important text <i> - Italic text
Examples: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <u> - Underlined text <sub> - Subscript text <sup> - Superscript text Bold text Important text Italic text Emphasized text Small text Deleted text Underlined text X2 H2O Marked text

HTML Hyper Text Markup Language

Similar presentations

Presentation on theme: "HTML Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML Hyper Text Markup Language

Similar presentations

Presentation on theme: "HTML Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback