HTML – COLORS:
bgcolor - sets a color for the background of the page.
text - sets a color for the body text.
alink - sets a color for active links or selected links.
link - sets a color for linked text.
vlink - sets a color for visited links - that is, for linked text that you have already clicked on.
<html>
<head>
<title>Link Attribute Example</title>
</head>
<body link="blue" alink="red" vlink="green">
<h1>Link Attribute Example</h1>
<p>This is a paragraph with a <a href="https://www.example.com">link</a>.</p>
<p>Click the link above to see the color changes:</p>
<ul>
<li><strong>Unvisited link</strong>: The default color for unvisited links is blue.</li>
<li><strong>Active link</strong>: While clicking the link, it will turn red.</li>
<li><strong>Visited link</strong>: After visiting the link, it will change to green.</li>
</ul>
</body>
</html>
HTML Color Coding Methods:
1) Color names - You can specify color names directly like green, blue or red.
2) Hex codes - A six-digit code representing the amount of red, green, and blue
that makes up the color.
3) Color decimal or percentage values - This value is specified using the rgb() property.
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text="blue" bgcolor="green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor="black">
<tr>
<td>
<font color="white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML Colors -Hex Codes:
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text="#0000FF" bgcolor="#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor="#000000">
<tr>
<td>
<font color="#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML Colors -RGB Values:
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
Note: All the browsers does not support rgb() property of color so it is recommended not to use it.
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor="rgb(0,0,0)">
<tr>
<td>
<font color="rgb(255,255,255)">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML – BACKGROUNDS:
By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background.
1) Html Background with Colors
2) Html Background with Images
Html Background with Colors:
syntax:
<tagname bgcolor="color_value"...>
<!-- Format 1 - Use color name -->
<table bgcolor="lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor="#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(0,0,120)" >
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(255,0,255)" width="100%">
<tr><td>
This background is green
</td></tr>
</table>
</body>
</html>
Html Background with Images:
syntax:
<tagname background="Image URL"...>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="/images/html.gif" width="100%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
Patterned & Transparent Backgrounds:
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
<!-- Another example on table background using pattern -->
<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
</body>
</html>
HTML – FONTS:
Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your
text to the same size, face, and color.
Set Font Size:
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
</body>
</html>
Relative Font Size:
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>
</body>
</html>
Setting Font Face:
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>
Setting Font Color:
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>
The <basefont> Element:
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>
<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>
</body>
</html>
HTML – FORMS:
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form.
HTML Form Controls:
There are different types of form controls that you can use to collect data using HTML form:
1) Text Input Controls
2) Checkboxes Controls
3) Radio Box Controls
4) Select Box Controls
5) File Select boxes
6) Hidden Controls
7) Clickable Buttons
8) Submit and Reset Button
Text Input Controls
There are three types of text input used on forms:
1) Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
2) Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
3) Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-line text input controls:
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Attributes:
type:
Indicates the type of input control and for text input control it will be set totext.
name:
Used to give a name to the control which is sent to the server to be recognized and get the value.
value:
This can be used to provide an initial value inside the control.
size:
Allows to specify the width of the text-input control in terms of characters.
maxlength:
Allows to specify the maximum number of characters a user can enter into the text box.
Password Input controls:
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Multiple-Line Text Input Controls:
This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
1) name: Used to give a name to the control which is sent to the server to be recognized and get the value.
2) rows: Indicates the number of rows of text area box.
3) cols: Indicates the number of columns of text area box
Checkbox Control:
Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
1) type: Indicates the type of input control and for checkbox input control it will be set to checkbox.
2) name: Used to give a name to the control which is sent to the server to be recognized and get the value.
3) value: The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
Radio Button Control:
Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>
1) type: Indicates the type of input control and for checkbox input control it will be set to radio.
2) name: Used to give a name to the control which is sent to the server to be recognized and get the value.
3) value: The value that will be used if the radio box is selected.
4) checked: Set to checked if you want to select it by default
Select Box Control:
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
Following is the list of important attributes of <select> tag:
1) name: Used to give a name to the control which is sent to the server to be recognized and get the value.
2) size: This can be used to present a scrolling list box.
3) multiple: If set to "multiple" then allows a user to select multiple items from the menu
Following is the list of important attributes of <option> tag:
1) value: The value that will be used if an option in the select box box is selected.
2) selected: Specifies that this option should be the initially selected value when the page loads.
3) label: An alternative way of labeling options.
File Upload Box:
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
Following is the list of important attributes of file upload box:
1) name: Used to give a name to the control which is sent to the server to be recognized and get the value
2) accept: Specifies the types of files that the server accepts.
Button Controls:
1) submit: This creates a button that automatically submits a form.
2) reset: This creates a button that automatically resets form controls to their initial values.
3) button: This creates a button that is used to trigger a client-side script when the user clicks that button.
4) image: This creates a clickable button but we can use an image as background of the
button
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>
Hidden Form Controls:
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
HTML label:
In HTML the <label> tag is used to associate a label with an input element. It provides a textual description or caption for a form control, such as an input field or a checkbox. The label helps users understand the purpose or expected input of the associated form control.
<html>
<head>
<title>label tag</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<label for="remember">
<input type="checkbox" id="remember" name="remember">
Remember me
</label>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML5 Semantics:
HTML5 introduced semantic elements that provide meaning and structure to different parts of a web page. These elements make it easier for search engines and assistive technologies to understand the content
<header>: Represents the header section of a document or a section within a document.
<nav>: Defines a section of a page that contains navigation links.
<section>: Defines a standalone section of a document.
<article>: Represents a self-contained composition within a document, such as a blog post.
<aside>: Represents content that is tangentially related to the main content, such as sidebars or pull quotes.
<footer>: Represents the footer section of a document or a section within a document.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Tags Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>...</p>
</section>
<article>
<h2>Blog Post</h2>
<p>...</p>
</article>
<aside>
<h3>Advertisement</h3>
<p>...</p>
</aside>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
HTML Audio:
The HTML <audio> element is used to play an audio file on a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<h1> The audio element </h1>
<p><mark> Tom and jerry </mark></p>
<audio controls>
<source src = "audio.mp3" type = "audio/mpeg">
</audio>
</body>
</html>
HTML Video:
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<video width="500px" height="500px" controls="controls">
<source src = "video.mp4" type="video/mp4">
</video>
</body>
</html>
Add muted after autoplay to let your video start playing automatically (but muted):
HTML - Iframes:
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document.
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Example</title>
</head>
<body>
<h1>Embedded YouTube Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
<h1>Embedded Google Map</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193294.7192738372!2d-122.41941543330888!3d37.77492953369992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e5ccf65a271%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2sin!4v1592393700814!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>
The <Iframe> Tag Attributes:
src
This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL.
name
This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.
frameborder
This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).
marginwidth
This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth = "10".
marginheight
This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight = "10".
height
This attribute specifies the height of <iframe>.
scrolling
This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.
longdesc
This attribute allows you to provide a link to another page containing a long description of the contents of the frame.
width
This attribute specifies the width of <iframe>.
HTML Google Maps:
<html>
<head>
<title>Google Maps Example</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 12
});
}
</script>
</head>
<body>
<h1>My Google Map</h1>
<div id="map"></div>
<script>
initMap();
</script>
</body>
</html>
HTML SVG:
SVG (Scalable Vector Graphics) is a markup language used for creating two-dimensional vector graphics. It provides a set of tags and attributes specifically designed for creating scalable and interactive graphics.
Tags:
<svg>: The root SVG element that defines the SVG document. All other SVG elements are nested within it.
<rect>: Used to draw rectangles and squares.
<circle>: Used to draw circles.
<line>: Used to draw straight lines.
<path>: Used to define complex shapes using path commands.
<text>: Used to render text within an SVG document.
<g>: Used to group multiple SVG elements together.
<polygon>: Used to draw polygons with three or more sides.
<polyline>: Used to draw a series of connected straight lines.
<ellipse>: Used to draw ellipses.
<image>: Used to embed raster images within an SVG document.
Attributes:
width and height: Specifies the width and height of the SVG viewport.
viewBox: Defines the coordinate system and aspect ratio of the SVG content.
fill: Specifies the fill color of an SVG shape.
stroke and stroke-width: Determines the stroke color and width of an SVG shape's outline.
transform: Applies transformations, such as translations, rotations, and scaling, to SVG elements.
x and y: Defines the coordinates of an SVG element relative to the SVG viewport.
points: Specifies the coordinates of the vertices of a polygon or polyline.
d: Defines the path data for the <path> element.
text-anchor: Determines the alignment of text relative to its starting point.font-family, font-size,
font-weight: Controls the appearance of text elements.
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="400" height="200">
<rect x="50" y="50" width="300" height="100" fill="blue" stroke="black" stroke-width="2" />
<circle cx="200" cy="150" r="50" fill="red" stroke="black" stroke-width="2" />
<line x1="50" y1="50" x2="350" y2="150" stroke="green" stroke-width="2" />
<path d="M50 150 L200 50 L350 150 Z" fill="yellow" stroke="black" stroke-width="2" />
<text x="200" y="100" text-anchor="middle" font-family="Arial" font-size="20" font-weight="bold">SVG Text</text>
</svg>
</body>
</html>
0 Comments