Scribd
Upload
18 views6 pages

WT UNIT 1

Uploaded by

stylishdeepak95
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
18 views6 pages

WT UNIT 1

Uploaded by

stylishdeepak95
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/ 6

UNIT I

DEVELOPING PORTALS USING HTML


Introduction to HTML 5 and CSS 3. Basic structure of HTML, designing a web page,
inserting
links images, horizontal rules, comments. Formatting text, title, headings, colors, fonts, sizes,
simple tables and forms. HTML tags, hyperlinks. Adding graphics and images, image maps,
image files. Using tables, forms, style sheets and frames. Floating of web site/pages.

1. Basic Structure of HTML5

The foundation of an HTML5 document is designed to clearly define the document's


elements and layout. This structure ensures web pages are standardized and work
seamlessly across browsers.

Detailed Explanation of the Tags:

 <!DOCTYPE html>: A declaration that tells the web browser this is an HTML5
document. It ensures the browser knows how to render the page using HTML5 rules.
 <html>: The root element that wraps all content.
 <head>: Contains meta-information (metadata) that is not displayed directly on the
web page but provides essential information like page title and links to CSS.
 <meta charset="UTF-8">: Specifies the character set for the document, ensuring proper
display of special characters.
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Ensures the
page is responsive by controlling the page's dimensions and scaling.
 <title>: The title shown on the browser tab.
 <body>: Contains all visible content, such as text, images, and elements.

Example:

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML5 Example Page</title></head><body>

<h1>Welcome to My Website</h1>

<p>This is an example of a basic HTML5 page.</p></body></html>

2. Designing a Web Page

Web page design involves structuring content and making it visually appealing using
CSS. The layout may include sections such as headers, navigation bars, content areas,
sidebars, and footers.
Example Layout Structure:

<body>

<header>

<h1>Site Title</h1>

<p>A brief description or tagline</p>

</header>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<main>

<article>

<h2>Article Title</h2>

<p>This is the main content area.</p>

</article>

<aside>

<h3>Sidebar</h3>

<p>Additional information or links</p>

</aside>

</main>

<footer>

<p>&copy; 2024 Your Name</p>

</footer></body>

3. Inserting Links and Images


 Links are created using the <a> (anchor) tag.

o href: Specifies the URL of the page the link points to.
o target: Specifies where to open the linked document (e.g., _blank for a new
tab).

Example:

<a href="https://www.example.com" target="_blank">Visit Example</a>

 Images use the <img> tag.

o src: Path to the image.


o alt: Descriptive text for accessibility and when the image fails to load.

Example:

<img src="image.jpg" alt="A description of the image" width="500" height="300">

4. Horizontal Rules and Comments

 Horizontal Rule: The <hr> tag creates a line to separate content.


 Comments: Use <!-- comment --> to insert comments that are ignored by the browser
and not displayed.

Example:

<p>Before the line</p><hr><p>After the line</p><!-- This comment will not be


visible on the page -->

5. Formatting Text

 Bold: Use <b> for stylistic bold and <strong> for importance.
 Italics: Use <i> for stylistic italics and <em> for emphasis.
 Underline: <u> is less commonly used, as CSS is preferred.
 Superscript: <sup> displays text as superscript (e.g., exponents).
 Subscript: <sub> displays text as subscript (e.g., chemical formulas).

Example:

<p><strong>Bold</strong> and <em>Italic</em> text. Water is H<sub>2</sub>O,


and 2<sup>3</sup> equals 8.</p>

6. Title, Headings, Colors, Fonts, and Sizes

 Title: Defined in the <head> section and appears on the browser tab.
 Headings: Ranges from <h1> (largest) to <h6> (smallest), providing hierarchy.
CSS Styling for Colors and Fonts:

<h1 style="color: darkblue; font-size: 40px;">Styled Heading</h1><p style="font-


family: 'Verdana', sans-serif; color: darkred;">Styled paragraph text.</p>

Color options:

 Can be defined using names (red), HEX (#FF0000), RGB (rgb(255, 0, 0)), or HSL
(hsl(0, 100%, 50%)).

7. Simple Tables and Forms

 Tables: Used to organize data in rows and columns.

o <table>: Main table element.


o <tr>: Table row.
o <td>: Table cell.
o <th>: Table header cell.

Example:

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>John</td>

<td>25</td>

</tr></table>

 Forms: Used to collect user input.

o <form>: Container for form elements.


o <input>: Various types like text, submit, checkbox, etc.
o <textarea>: Multiline input.
o <select>: Dropdown menu.

Example:

<form action="submit_form.php" method="post">


<label for="username">Username:</label>

<input type="text" id="username" name="username"><br>

<input type="submit" value="Submit"></form>

8. Adding Graphics, Image Maps, and Image Files

Image Maps allow specific areas of an image to be clickable.

 <map>: Container for the clickable areas.


 <area>: Defines the shape and coordinates for each clickable region.

Example:

<img src="image.jpg" alt="Sample Image" usemap="#imagemap"><map


name="imagemap">

<area shape="rect" coords="34,44,270,350" href="https://example.com"


alt="Section 1">

<area shape="circle" coords="200,150,50" href="https://anotherlink.com"


alt="Circle Area"></map>

9. Using Tables, Forms, Style Sheets, and Frames

 Tables and Forms: Enhance layout and data collection capabilities.


 Style Sheets (CSS): Centralize styling rules using <style> or link with <link>.

Example of External CSS:

<link rel="stylesheet" href="styles.css">

 Frames (Deprecated): <frame> and <frameset> were used to split a page into separate
sections, but are now replaced by iframe or CSS-based layouts.

10. Floating of Web Pages/Elements

CSS float property:

 Positions elements to the left or right, allowing other elements to wrap around them.

Example:

<div style="float: left; width: 50%; background-color: lightgray;">

<p>Left content</p></div><div style="float: right; width: 50%; background-color:


lightblue;">
<p>Right content</p></div>

You might also like