Full Stack Development-1(Skill Enhance Course)
Experiments covering the Topics:
● Lists, Links and Images
● HTML Tables, Forms and Frames
● HTML 5 and Cascading Style Sheets, Types of CSS
● Selector forms
● CSS with Color, Background, Font, Text and CSS Box Model
● Applying JavaScript - internal and external, I/O, Type Conversion
● JavaScript Conditional Statements and Loops, Pre-defined and User-defined Objects
● JavaScript Functions and Events
● [Link]
A Simple HTML Document
What is HTML?
<!DOCTYPE html>
<html>
•HTML stands for Hyper Text Markup <head>
Language <title>Page Title</title>
•HTML is the standard markup </head>
language for creating Web pages <body>
•HTML describes the structure of a
Web page <h1>My First Heading</h1>
•HTML consists of a series of elements <p>My first paragraph.</p>
•HTML elements tell the browser how
</body>
to display the content </html>
•HTML elements label pieces of
content such as "this is a heading", Output:
"this is a paragraph", "this is a link",
etc.
My First Heading
My first paragraph.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!
Basic HTML Elements(tags)
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example:
<!DOCTYPE html>
<html>
<body> Output:
<h2>An unordered HTML list</h2>
<ul> An unordered HTML list
<li>Coffee</li> •Coffee
<li>Tea</li> •Tea
<li>Milk</li> •Milk
</ul>
</body>
</html>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2> Output:
<ol> An ordered HTML list
<li>Coffee</li> [Link]
<li>Tea</li> [Link]
<li>Milk</li> [Link]
</ol>
</body>
</html>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
Example:
<!DOCTYPE html>
<html> Output:
<body>
<h2>A Description List</h2> A Description List
Coffee
<dl> - black hot drink
<dt>Coffee</dt>
<dd>- black hot drink</dd> Milk
<dt>Milk</dt> - white cold drink
<dd>- white cold drink</dd>
</dl>
</body>
</html>
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
•Use the <a> element to define a link
•Use the href attribute to define the link address
•Use the target attribute to define where to open the linked document
•Use the <img> element (inside <a>) to use an image as a link
•Use the mailto: scheme inside the href attribute to create a link that opens the user's email
program
The target attribute can have one of the following values:
•_self - Default. Opens the document in the same window/tab as it was clicked
•_blank - Opens the document in a new window or tab
•_parent - Opens the document in the parent frame
•_top - Opens the document in the full body of the window
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
•src - Specifies the path to the image
•alt - Specifies an alternate text for the image