HTML

HTML tags are not case sensitive

Recommendations

· Always close all tags , including open ones like <br>

· Always Use Lowercase Attributes

· Always put Attribute Values inside a quotation mark

<!DOCTYPE html> syntax for html5

<head> </head> // contains meta data, which is not displayed

Text

<p> </p> standard paragraph // it has an attribute title= “visible on mouse hover” tag . which shows mouse over display hint

<h1,h2,h3> </ h1,h2,h3> headings

<a href= “www.junctiontech.in” > This is a link </a> href means hyperlink reference

<img src= “logo.png” alt= “best it company” width = “100” height = “100” > // img tag does not have a forward slash closing tag , alt attribute defines the alternative text for the image.

<br> // line break , Empty element , does not require a closing tag , but it should be closed with <br />

<hr> creates a horizontal line

<pre> </pre> // shows in a pre formatted style , usually with font courier

<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 ( underlined )text

<del> Defines deleted text <mark> Defines marked/highlighted text

<q> quotation text <abbr title="World Health Organization">WHO</abbr>

<address> for address <cite> for title of a work , usually displayed initalics

<bdo> bi directional override <bdo dir="rtl">This text will be written from right to left</bdo>

Attributes

Attributes are displayed in the opening tag

<p title = “This will be displayed when mouse moves over> and this is the actual paragraph text </p>

Single quote or double quotes : either can be used

<p title='John "ShotGun" Nelson'> or vice versa: <p title="John 'ShotGun' Nelson">

Some common attributes used in html tags

Disabled: specifies that input element should be disabled

id Specifies a unique id for an element

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.

Styles

Styles can be added into a html page through three methods

1. Using a style attribute in an html tag like <p style = “color:blue”>

2. Using <style> tag in a <head > element like <style > p { color:blue} </style>

3. External . using a css style sheet

a. Css styling has following structure html element {property:value; property;value}

b. External styles are applied by using <link rel= “styleheet” href= “style.css”>

Common properties

Color, font-family, font-size, border , padding ( space inside a border ) margin ( space outside a border )

Ø To define a special style for one single element which has id <p id=“abc” > . p#abc{color:blue;}

Ø To apply a style for a number of elements add those elements to a class <p class = “cl1” > p.cl1{color= “blue”;}

Ø Use id to address single element use class to address group of elements

Links

Ø A hyperlink has certain styles by default that can be changed by applying appropriate style

Ø Target attribute in a link decides how page will open <a href= “index.htm” target = “_blank”>Home </a> This will ensure page opens in a new tab or window “_self” will open in the same frame . “_parent” will open in parent frame . “_top” will open in the full body of window.

Ø One can make image as link by embedding <a> <img>…..

Ø A hyperlink can be created for any <a> element defined by id as well

Images

Ø Screen readers can read alt ( alternate text)attributes

Ø Image map can create a map with cliclable area

Tables

Ø Tables are defined with <table> table rows are nested <tr> table data is nested with <td> table header is nested with <th>

Ø Border is defined with border attribute

Ø Colspan , rowspan let a row or column span multiple column or rows

Ø <caption > creates a caption for the table ,The <caption> tag must be inserted immediately after the <table> tag

<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

Lists

Unordered <ul list-style-type:disc> <li> </li> <li> </li> </ul> // disc,circle, square , none

Ordered <ol type= “1”> <li> </li> <li> </li> </ol> // 1,a,A,I,i .

Description <dl > <dt> </dt> <dd> </dd> </dl>

a style value for “display:inline” can make a <li> horizontal instead of vertical

Blocks

<div > is formatted with line breaks

<span > is not formatted with line breaks

Layout

Responsive Design

To create a responsive design just create a number of equal size divs and float:left or right .

Iframe

An iframe is used to display a web page within a web page

HTML Entities

Reserved characters in HTML must be replaced with character entities. For example:

“<” is a reserve character and can not be entered directly , instead it is entered as < or < <p>I will display <</p> Displays “I will display <”

HTML Symbols

<p>I will display €</p> Displays “I will display €”

HTML Encoding

In order to display a page correctly a browser must know the character set , for HTML5

HTML Uniform resource locator

HTML XHTML

XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

HTML Forms

Forms are a way to input data from user and perform an action based on it, the type of input can be determined through attribute action and type of post Get or Post

<form >
First name:<br>
<input type="text/button/submit" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

School management software

www.junctiontech.in

info@junctiontech.in

Contact : 8109069226
junction software pvt ltd

Search This Blog

Software development and school management

Quick HTML Reference