Scribd
Upload
97 views9 pages

HTML

This document provides an overview of basic HTML elements and tags. It defines HTML as a document layout and hyperlink specification language used to design page layout and specify hyperlinks. It describes common tags such as <html>, <head>, <title>, <body>, basic text formatting tags, links, images, lists, and tables. It also covers CSS, forms, audio, video, and other HTML elements.

Uploaded by

dharap0311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
97 views9 pages

HTML

This document provides an overview of basic HTML elements and tags. It defines HTML as a document layout and hyperlink specification language used to design page layout and specify hyperlinks. It describes common tags such as <html>, <head>, <title>, <body>, basic text formatting tags, links, images, lists, and tables. It also covers CSS, forms, audio, video, and other HTML elements.

Uploaded by

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

BASIC HTML ELEMENTS

HTML is a document layout and hyperlink specification language which is used


to design the layout of a document and to specify the hyperlinks

It tells the browser how to display the contents of a hypertext document

HTML is a
 Page layout specification language
 Hyperlink specification language

HTML is not a
 Word processing tool
 Desktop publishing solution
 Programming language

TAG – A coded HTML command or keyword that indicates how a part of the
webpage should be displayed; it is written within angle brackets

ATTRIBUTE – A special word used inside a tag to specify additional information


such as color, alignment, etc.

BASIC TAGS

 <html> - This tag identifies the document as an HTML document, the


code begins and ends with this tag

It marks the beginning and end of an HTML document

Lang attribute: Specifies the language used in the webpage


en, en-uk, en-us, fr, de, ar, zh, hi

 <head> - This tag defines the header of the document and contains
information about the title, script, style, document descriptions, etc.

 <title> - This tag is used inside the <head> tag and specifies the title
which will appear on the browser’s title bar, and the bookmarks bar of
the user; it identifies the content of the webpage in a global context
 <body> - This tag encloses all the other tags, attributes, and information
to be displayed in the webpage and defines the document’s body

Attributes: background, bgcolor, text, link, alink, vlink, margin

<!DOCTYPE html> - Tells the browser what version of HTML is being used

<meta charset> - Specifies the character encoding used

Ways to specify colors in HTML →

 Name: Use the general name of the color, but you cannot get specific
shades or variations of the color

 RGB Values: Color model based on red, green, blue values; the value
should be from 0-255, and a 4th value can specify the transparency

 Hexadecimal Values: 6-digit number and letter combinations


representing colors by a # followed by 3 two-digit RGB sequences

ELEMENTS

 Container Element – Require paired tags, that are starting tags and
closing tags. Closing tags have a forward slash before the keyword

 Empty/ Void Element – Elements which require only a starting tag and
not a closing tag as they are self-contained

TAGS

Headings – <h1> to <h6>


 <h1> > <h2> > <h3> > <h4> > <h5> > <h6>
 Difference: type face, point size, and space above and below
 Attribute: align; Values: left, right, center

Paragraphs – <p>
 Defines a paragraph in a webpage
 Recognizes characters like spaces, tabs, returns, etc.
 Attributes: class, id, style, contenteditable, text, align
Line Break – <br>
 Used to end a line and insert a blank line before beginning another tag
 It can be used as a paragraph marker
 It is an empty tag (no need to close)

Horizontal Rule – <hr>


 Inserts horizontal lines to separate sections of the document visually
 It is an empty tag (no need to close)
 Attributes: size, width, color, align, noshade

Default font size – 3


Range of font size – 1 to 7

Each virtual size is 20% larger than its preceding font size

Base font – Empty tag which can be used to set relative font size for elements
<basefont size = 2>
<basefont size = +2>
<basefont size = -2>

Font Tag – Container tag which can be used to set


 Size: <font size=7> text </font>
 Color: <font color=#00EEFF> text </font>
 Face: <font face=”Times New Roman, Arial”> text </font>

Comments in HTML are written inside <!-- and -->


Browsers ignore any content written inside comment tags

TEXT STYLES

 Physical – Indicate the specific type of appearance for a section


o They are rendered in the same manner by all browsers
o Examples: <b>, <i>, <u>, <tt>

 Logical – Specify the meaning of the text style and show accordingly
o They are rendered in different manner by different browsers
o Examples: <dfn>, <em>, <code>, <kbd>, <samp>, <strong>

Superscript – <sup> text </sup


Subscript – <sub> text </sub>
Special Characters – Escape sequence needed to display these
> - &gt;
< - &lt;
& - &amp;
“ - &quot;

LISTS

 Unnumbered or Unordered List

<ul type=”disc/circle/square”>
<li> hi </li>
<li> hello </li>
<li> hiello </li>
</ul>

 Numbered or Ordered List

<ol type=”1/i/I/a/A” start=”int”>


<li> hi </li>
<li> hello </li>
<li> hiello </li>
</ol>

 Definition List

<dl compact>
<dt> hi </dt>
<dd> I say hi </dd>
<dt> hello </dt>
<dd> I say hello </dd>
<dt> hieollo </dt>
<dd> I say hiello </dd>
</dl>

<section> </section>
<article> </article>
<nav> </nav>
<aside> </aside>
<header> </header>
HTML IMAGES, LINKS AND
TABLES
IMAGE TAG

Image tag <img> – empty tag

Attributes – width, height, border, alt, title, align

<img src=”file.ex” width=n height=n border=n alt=”al text” title=”tooltip”>

<img src=”image.jpg” width=100px height=100px border=2px alt=”alternate


text to display” title=”tooltip on hover”>

LINK

Anchor tag <a> – container tag

Attributes – href, target, id, title

<a href=”file name.ex” target=”target”> Label </a>

<a href=”www.w3schools.com” target=”_blank”> W3 Schools </a>

To link to an email:
<a href=”mailto:[email protected]?subject=CSS is better”> mail </a>

TABLE

Table tag <table> – container tag

Attributes: border, bordercolor, bordercolorlight, bordercolordark, frame, rules,


background, bgcolor, height, width, align, valign, cellspacing, cellpadding

<thead> - Table header


<tbody> - Table body
<tfoot> - Table footer
<th> - Table header cell (centered and bold)
<tr> - Table row
<td> - Table data

HTML AUDIO, VIDEO AND FORMS


Ways to link audio and video files –
 Link it using the anchor tag
 Embed it with the embed tag
 Use the audio/ video tag

Embed tag –

<embed src=”url” width=n height=n autostart=True/False loop=True/False>

AUDIO

<audio controls autoplay loop width=n height=n>


<source src=”url” type=”audio/mp3>
Your browser does not support this audio element
</audio>

VIDEO

<video controls autoplay loop width=n height=n>


<source src=”url” type=”video/mpeg>
Your browser does not support this video element
</video>

Mp4 – video/mp4
WebM – video/webm
Ogg – video/ogg

FORMS

Shell: Part of the form the user fills out


Script: Part of the form that processes the information

Method → Specifies how the data is submitted to the server (get/post/form)


Action → Specifies the url where the form data will be sent (url of a file)

Input – Text, password, radio, checkbox, submit, reset, button


Textarea, button, select (option)
Label – <label for=”name”> Label </label>

 <input type=”text” name=”name”> Label

 <input type=”password” name=”name”> Label

 <input type=”radio” name=”name” value=”value1”> Label


<input type=”radio” name=”name” value=”value2”> Label
<input type=”radio” name=”name” value=”value3”> Label

 <input type=”checkbox” name=”name” value=value1”> Label


<input type=”checkbox” name=”name” value=value2”> Label
<input type=”checkbox” name=”name” value=value3”> Label

 <input type=”submit” value=”value”> Label

 <input type=”reset” value=”value”> Label

 <input type=”button” value=”value”> Label

 <textarea name=”name” cols=n rows=n wrap placeholder=”x”>


</textarea>

 <button type=”type” value=”value”> Label </button>

 <select name=”name” multiple>


<option value=”value1”> 1
<option value=”value2”> 2
<option value=”value3”> 3
</select>

Fieldset and legend are container tags used to give the form a neat look
CSS
CSS – Cascading Style Sheets

Layers in a webpage –
 Structure layer: HTML
 Presentation layer: CSS
 Behavior layer: Scripting language

CSS is a stylesheet language used to describe the presentation of a document


written in HTML code

 Inline CSS

Highest priority

Syntax – <selector style=”property1:value1; property2:value2;>

Example – <h1 style=”color:blue; face:Arial;”> Hello World! </h1>

 Internal CSS

Second priority
Written in <style> in <head>

Syntax – <style type=”text/css”>


selector{
property1: value1;
property2: value2;
}
</style>

Example - <style type=”text/css”>


h1{
color: blue;
face: Arial;
}
</style>
 External CSS

Least priority, linked to the main HTML code in <head> with <link>

Syntax – <link rel=”stylesheet” type=”text/css” href=”file_name.css”>

Example – <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

SELECTORS

Universal Selector – asterisk *

 Background

Background: background-color background-image background-repeat

 Font

Font: style variant weight size family

 Border

Border: width, style, color

 Outline

Outline: color, style, width

ABBREVIATIONS
HTML – Hyper Text Markup Language
HTTP – Hyper Text Transfer Protocol
FTP – File Transfer Protocol
UTF – Unicode Transformation Format
JPG – Joint Photographic Group
JPEG – Joint Photographic Experts Group
PNG – Portable Network Graphics
GIF – Graphics Interchange Format
XBM – X BitMap

You might also like