Date post: | 13-Jan-2017 |
Category: |
Technology |
Upload: | ifour-institute-sustainable-learning |
View: | 87 times |
Download: | 2 times |
iFour Consultancy
HTML (Hyper Text Markup Language)
Introduction to HTML Creating HTML Pages HTML Structure Tags Attribute Doctype Declaration Text Formatting tags Ways for Hyperlink Block and Inline Elements HTML Tables HTML5 New Structural Elements in HTML5 New Form Elements New Graphics and Media Elements
INDEX
Introduction To HTML
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
•A markup language is a set of markup tags •A markup language is a set of markup tags
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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
4
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
HTML Structure
HTML is comprised of “elements” and “tags”• Begins with <html> and ends with </html>
Elements (tags) are nested one inside another:
Tags have attributes:
HTML describes structure using two main sections: <head> and <body>
5
<html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" />
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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
6
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
First HTML Page7
<!DOCTYPE HTML><html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body></html>
Test.html
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
First HTML Page: Tags8
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing tag and the content inside.
<!DOCTYPE HTML><html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body></html>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
<!DOCTYPE HTML><html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body></html>
First HTML Page: Header9
HTML header
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
<!DOCTYPE HTML><html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body></html>
First HTML Page: Body10
HTML body
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Some Simple Tags
Hyperlink tags
Image tags
Text formatting tags
11
<a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em><br />new line<br />This one is <strong>more emphasized.</strong>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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
12
<img src="logo.gif" alt="logo" />
Attribute alt with value "logo"
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Headings and Paragraphs
Heading Tags (h1 – h6)
Paragraph Tags
Sections: div and span
13
<p>This is my first paragraph</p><p>This is my second paragraph</p>
<h1>Heading 1</h1><h2>Sub heading 2</h2><h3>Sub heading 3</h3>
<div style="background: skyblue;"> This is a div</div>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
The <!DOCTYPE> 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
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
The <head> Section
Contains information that doesn’t show directly on the viewable page Starts after the <!doctype> declaration Begins with <head> and ends with </head> Contains mandatory single <title> tag Can contain some other tags, e.g.
• <meta>• <script>• <style>• <!–- comments -->
15
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
<head> Section: <title> tag
Title should be placed between <head> and </head> tags
Used to specify a title in the window title bar Search engines and people rely on titles
16
<title>iFour consultancy – Sustainable Solution </title>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
The <body> Section
The <body> section describes the viewable portion of the page Starts after the <head> </head> section Begins with <body> and ends with </body>
17
<html> <head><title>Test page</title></head> <body> <!-- This is the Web page body --> </body></html>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
<b></b> bold<i></i> italicized<u></u> underlined<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong<em></em> emphasized<pre></pre> Preformatted text<blockquote></blockquote> Quoted text block<del></del> Deleted text – strike through
Text Formatting Text formatting tags modify the text between the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold
18Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Hyperlinks: <a> 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:
19
<a href="form.html">Fill Our Form</a>
<a href="../parent.html">Parent</a>
<a href="stuff/cat.html">Catalog</a>
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Inserting an image with <img> tag:
Image attributes:
Example:
Images: <img> tag
src Location of image file (relative or absolute)alt Substitute text for display (e.g. in text mode)height Number of pixels of the heightwidth Number of pixels of the widthborder Size of border, 0 for no border
<img src="/img/basd-logo.png">
<img src="./php.png" alt="PHP Logo" />
20Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Block and Inline Elements
Block elements add a line break before and after them• <div> is a block element• Other block elements are <table>, <hr>, headings, lists, <p> and etc.
Inline elements don’t break the text before and after them• <span> is an inline element• Most HTML elements are inline, e.g. <a>
21
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
The <div> Tag
<div> creates logical divisions within a page Block style element Used with CSS Example:
22
<div style="font-size:24px; color:red">DIV example</div>
<p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p>
div-and-span.html
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
The <span> 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
23
<p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p>
span.html
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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:
• <table></table>: begin / end the table
• <tr></tr>: create a table row
• <td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS floats and positioning styles instead
24
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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
25
<input type="text" name="FirstName" value="This is a text field" />
<textarea name="Comments">This is a multi-line text field</textarea>
<input type="hidden" name="Account" value="This is a hidden text field" />
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
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
HTML Summary
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
DOCTYPE declaration for HTML5 is very simple:Use <!DOCTYPE html> instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> It uses UTF-8 and you define it with just one meta tag: <meta charset="UTF-8">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)
HTML5
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Removed Elements in HTML5
HTML5
Removed Element Use Instead<acronym> <abbr>
<applet> <object><basefont> CSS
<big> CSS<center> CSS
<dir> <ul>
Removed Element Use Instead<font> CSS
<frame><frameset><noframes>
<strike> CSS, <s>, or <del><tt> CSS
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
New Semantic/Structural Elements in HTML5
HTML5
Element Description<article> Defines an article in the document<aside> Defines content aside from the page content<bdi> Defines a part of text that might be formatted in a different direction from other text<details> Defines additional details that the user can view or hide<dialog> Defines a dialog box or window<figcaption> Defines a caption for a <figure> element<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.<footer> Defines a footer for the document or a section<header> Defines a header for the document or a section<main> Defines the main content of a document
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
New Form Elements in HTML5
HTML5
Element Description<datalist> Defines pre-defined options for input controls<keygen> Defines a key-pair generator field<output> Defines the result of a calculation
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
HTML5
Element Description
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines a dialog box or window
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters
<ruby> Defines a ruby annotation
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
New Graphics & Media Elements in HTML5
HTML5
Element Description<canvas> Draw graphics, on the fly, via scripting<svg> Draw scalable vector graphics<audio> Defines sound content<embed> Defines containers for external applications <source> Defines tracks for <video> and <audio><track> Defines tracks for <video> and <audio><video> Defines video or movie content
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
New Input Types in HTML5• Input Types: color,date,datetime,datetime-
local,email,month,number,range,search,tel,time,url,week• InputAttribute:autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovali
date,formtarget,height and width, list, multiple, min and max, placeholder, step, requiredNew syntax in HTML5
• This example demonstrates the different syntaxes used in an <input> tag:• Empty :<input type="text" value="John" disabled>• Unquoted :<input type="text" value=John>• Double-quoted :<input type="text" value="John Doe">• Single-quoted :<input type="text" value='John Doe'>
• In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
HTML5
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
http://www.w3schools.com/html/html5_intro.asp https://www.tutorialspoint.com/html5/ http://www.w3schools.com/html/ https://www.tutorialspoint.com/html/
References
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/
Questions?
Software Outsourcing Company Indiahttp://www.ifourtechnolab.com/