HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML...

22
HTML

Transcript of HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML...

Page 1: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML

Page 2: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

Basic HTML

• HTML document – <!DOCTYPE html>

• HTML headings– <h1> to <h6>

• HTML paragraphs– <p> </p>

• HTML links– <a>

• HTML images– <img>

Page 3: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Attributes

Attribute Description

alt Specifies an alternative text for an image

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

value Specifies the value (text content) for an input element.

Page 4: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Headings

Tag Description

<html> Defines an HTML document

<body> Defines the document's body

<head> Defines the document's head element

<h1> to <h6> Defines HTML headings

<hr> Defines a horizontal line

Page 5: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Paragraphs

Tag Description

<p> Defines a paragraph

<br> Inserts a single line break

<pre> Defines pre-formatted text

Page 6: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Styles

• style attribute for styling HTML elements• background-color for background color• color for text colors• font-family for text fonts• font-size for text sizes• text-align for text alignment

Page 7: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Text Formatting ElementsTag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Page 8: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Quotation and Citation Elements

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

Page 9: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Styles - CSS• HTML style attribute for inline styling• HTML <style> element to define internal CSS• HTML <link> element to refer to an external CSS file• HTML <head> element to store <style> and <link>

elements• CSS color property for text colors• CSS font-family property for text fonts• CSS font-size property for text sizes• CSS border property for visible element borders• CSS padding property for space inside the border• CSS margin property for space outside the border

Page 10: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Links

• <a> element to define a link• href attribute to define the link address• target attribute to define where to open the

linked document• <img> element (inside <a>) to use an image as a

link• id attribute (id="value") to define bookmarks in a

page• href attribute (href="#value") to link to the

bookmark

Page 11: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

target attribute

Target Value Description

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framename Opens the linked document in a named frame

Page 12: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Images• HTML <img> element to define an image• HTML src attribute to define the URL of the image• HTML alt attribute to define an alternate text for an image, if it

cannot be displayed• HTML width and height attributes to define the size of the image• CSS width and height properties to define the size of the image• CSS float property to let the image float• HTML <map> element to define an image-map• HTML <area> element to define the clickable areas in the image-

map• HTML <img>'s element usemap attribute to point to an image-

map

Page 13: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Table Tags• HTML <table> element to define a table• HTML <tr> element to define a table row• HTML <td> element to define a table data• HTML <th> element to define a table heading• HTML <caption> element to define a table caption• CSS border property to define a border• CSS border-collapse property to collapse cell borders• CSS padding property to add padding to cells• CSS text-align property to align cell text• CSS border-spacing property to set the spacing between cells• colspan attribute to make a cell span many columns• rowspan attribute to make a cell span many rows• id attribute to uniquely define one table

Page 14: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Table Tags

Page 15: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML List Tags• HTML <ul> element to define an unordered list• HTML style attribute to define the bullet style• HTML <ol> element to define an ordered list• HTML type attribute to define the numbering type• HTML <li> element to define a list item• HTML <dl> element to define a description list• HTML <dt> element to define the description term• HTML <dd> element to define the description data• Lists can be nested inside lists• List items can contain other HTML elements• CSS property display:inline to display a list horizontally

Page 16: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

Unordered HTML Lists - The Style AttributeStyle Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

Ordered HTML Lists - The Type AttributeType Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Page 17: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Block and Inline Elements• Block-level Elements– A block-level element always starts on a new line and takes

up the full width available (stretches out to the left and right as far as it can).

– Examples of block-level elements: • <div> <h1> - <h6> <p> <form>

• Inline Elements– An inline element does not start on a new line and only

takes up as much width as necessary.– Examples of inline elements:• <span> <a> <img>

Page 18: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

• HTML Classes– Classing Block Elements– Classing Inline Elements

• HTML Layouts– HTML Layout Using <div> Elements– HTML Layout Using Tables

• HTML iframe– Syntax:- <iframe src="URL"></iframe>– Use iframe as a Target for a Link

• <iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Page 19: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Forms• The <input> element is the most important form element.• The <input> element has many variations, depending on the type attribute.

Attribute of FORM Description

accept-charset Specifies the charset used in the submitted form (default: the page charset).

action Specifies an address (url) where to submit the form (default: the submitting page).

autocomplete Specifies if the browser should autocomplete the form (default: on).

enctype Specifies the encoding of the submitted data (default: is url-encoded).

method Specifies the HTTP method used when submitting the form (default: GET).

name Specifies a name used to identify the form (for DOM usage: document.forms.name).

novalidate Specifies that the browser should not validate the form.

target Specifies the target of the address in the action attribute (default: _self).

Page 20: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Form ElementsTag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<select> Defines a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

Page 21: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Input Types• Input type text • Input type password• Input type radio• Input type checkbox• Input type button• Input type number - with

restrictions• Input type number - with steps • Input type date - with date

picker• Input type date - with

restrictions

• Input type color - with color picker

• Input type range• Input type month• Input type week• Input type time• Input type datetime• Input type datetime-local• Input type email• Input type search• Input type tel• Input type url

Page 22: HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

HTML Input Attributes• The value Attribute• The name Attribute• The ID Attribute• The readonly Attribute• The disabled Attribute• The size Attribute• The maxlength Attribute