0% found this document useful (0 votes)
5 views

HTML, Forms, CSS

Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views

HTML, Forms, CSS

Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML

Heading Tags: <H1> to <H6>


<P> Tags
<P> tag used for paragraph </P>
<P Align=”Right”> Right Alignment </P>
<P Align=”Left”> Left Alignment </P>
<P Align=”Center”> Center Alignment </P>
<P Align=”Justify”> Justify Alignment </P>
<CENTER> Center Tag </CENTER>
Commenting
<!-- Used for Commenting –>
<COMMENT> Used for commenting </COMMENT>
Formatting
<B>Bold <I> Italics <U> Underline
<SUB> Subscript </SUB>
<SUP> Superscript </SUP>
<PRE> Ignores spaces and lines while displaying it on a webpage. </PRE>
Font
<FONT Face=”Lucida Handwriting” Size=”5” Color=”Red”> Text </FONT>
<BASEFONT Attribute= “Value”> Used to set the font face, size, color etc for the whole document
Body
<Body Background=”flower.jpg” OR bgcolor=”red” Text=”blue”>
Link
<A Href=”www.youtube.com”>Youtube</A>
<Body Link=”Green”> (unvisited links)
<Body Alink=”Yellow”> (Website containing the link has already been opened)
<Body Vlink=”Pink”> (Visited link)
Empty Elements
<HR size=”4” Width=”25%” Align=”Left” Color=”Blue” NOSHADE>
<BR> USED FOR LINE BREAK
Unordered Lists
<UL TYPE=”Circle” or “Disc” or “Square”>
<LI> Something </LI>
<LI> Another Thing </LI>
</UL>
Ordered List
<OL Type=”1” or “A” or “a” or “I” or “i” Start=”3”>
<LI> Something </LI>
<LI> Another Thing </LI>
</OL>
Definition List
<DL> (description list)
<DT>Something</DT>
<DD> Definition of Something </DD>
</DL>
Image
<IMG src=”img.png” alt=”image” align=”top/middle/bottom” width=”70%” height=”70%”>
Linking
<A href=”Value”> CLICK HERE </A>
<a hREF=”#link”> Link to another section </A>
<A Name=”link”> ……. </A>
<A Href=”linkingsection.html#Keyboard”> Keyboard </A>
<A Href=”mailto:[email protected]”>Mail Here</A>
<A href=”image.html”><Img src=”computer.png”> </a>
*Hypertext is a text which contains links to information on the same webpage or some other webpage.
Inserting Audio and Video
<a href=”audio.mp3”>Click</a> or <audio controls src=”audio.aac”>
Attributes: src=”audio.mp3” controls, autoplay, loop
<a href=”video.mp4”> click </a> or <video controls src=”video.mp4”>
Or <EMBED Src=”audio.mp3”></EMBED>
<EMBED Src=”video.mp4”></EMBED>
Tables
<TABLE border=”3” bordercolor=”blue” bgcolor=”red” align=”center”>
<TABLE cellspacing=”10” Cellpadding=”10” height=”400” width=”400”>
<TR Align=”Left/Right/Center”> Aligns text within the cell
<TD Valign=”Top/Middle/Bottom”> Vertical alignment of data
<TR> Table Row
<TD> Table Data
<TH> Table Heading
<CAPTION> Caption of the Table
Colspan (horizontal) rowspan (vertical)
Forms- Text
<Form action=”mailto:[email protected]” method=”get/post”>
<LABEL for=”First name”> First Name: </LABEL>
<INPUT Name=”Name” Type=Text Value=”Name” Size=30 Maxlength=10>
<INPUT Type=Checkbox/Text/Radio/Password>
Forms-List
<SELECT Name=”Cities”>
<OPTION Selected> This </OPTION>
Combobox:
<Select Name=”cities” size=”4”>
Multi-Select
<SELECT Name=”Cities” multiple”>
Submit Button, Reset Button
<Input Type=”Submit” Value=”SEND”>
<Input Type=”Reset” Value=”RESET”>
TextArea:
<TEXTAREA Rows=6 Cols=50 Name=Remarks> </TEXTAREA>

CSS
Inline Linking
<BODY Style=background-color:blue>
<P Style=Color:red;size:5>
Internal Linking:-
<html>
<head><title> </title>
<style TYPE="text/css">
body {background-color:green} </style></head>
External Linking
Syntax:- <LINK rel=”stylesheet” href=css.css type=text/css> (in the html file)
H1{color:red}

FONT
Family:
P{Font-Family:Arial, Verdana, Sans-Serif;}
<P Style=”Font-family:arial, verdana, sans-serif;”>
Style:
P{Font-style:oblique}
<P Style=”Font-style:oblique;”>
Size:
Can be absolute, relative size, length or percentage
Absolute size=xx-small, x-small, small, medium, large, x-large, xx-large
Relative Strength=larger, smaller
Specifying font size-> px, pt, %, em
By default, font size is 16 pixels.
H1{Font-size:large}
<P Style=”Font Size:50px;”>
Align
H1{Text-align:center/right/left/justify:}
Color
H1{Color:#hexvalue/colorname/rgb color code;}
Height
H1{Line=Height:5px;}
Background-color
P{Background-color:Transparent/Color/Hex value/rgb}
Margin
Margin-Top, Margin-right, Margin-bottom, margin-left
Length= specifies the margin in units of length, px, pt, cm
Percentage= Specifies the margin in % of the width
Auto=Margin is calculated by browser automatically
P{Margin-top:100px; Margin-bottom:100px;Margin-left:150px;Margin-right:150px;}
Border-Style
Border-style:value;
Value: None/Hidden/Dotted/Dashed/Solid/Double/Groove/Ridge/Inset/Outset
Height and Width Property
-Sets the height and width of a web page element
- Height can either be set to auto
- Can be defined in px,cm,%,etc.
P{Width:100px;Height;100px}
Float
Used to push the position of an element left or right in relation to the other elements to wrap around it.
Values= left, right, none, inherit
Outline
Outline Style, Outline width, outline color,
inherit, initial.
Outline width values- thin, thick, medium,
length, inherit

You might also like