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

HTML, Forms, CSS

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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