Scribd
Upload
2 views

css unit 2

The document provides an introduction to markup languages, specifically HTML and DHTML, detailing their roles in web page structure and interactivity. It outlines the advantages of using markup languages, the fundamental structure of HTML documents, and various HTML elements and formatting techniques. Additionally, it covers page layouts, image handling, lists, tables, and form creation, providing examples for each topic.

Uploaded by

Karthik Lathar
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
2 views

css unit 2

The document provides an introduction to markup languages, specifically HTML and DHTML, detailing their roles in web page structure and interactivity. It outlines the advantages of using markup languages, the fundamental structure of HTML documents, and various HTML elements and formatting techniques. Additionally, it covers page layouts, image handling, lists, tables, and form creation, providing examples for each topic.

Uploaded by

Karthik Lathar
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/ 9

Crea ng a Website and Introduc on to Markup Languages (HTML and

DHTML)
Introduc on to Markup Languages
Markup languages, such as HTML (HyperText Markup Language) and
DHTML (Dynamic HTML), are the building blocks of web pages. They
define the structure, layout, and appearance of content on the web.
 HTML: Provides the basic structure of web pages by defining
elements like headings, paragraphs, links, tables, and forms.
 DHTML: Enhances sta c HTML pages by adding interac vity and
dynamic content through a combina on of HTML, CSS, and
JavaScript.
Advantages of Markup Languages
1. Ease of Use:
o HTML is easy to learn and implement, making it beginner-
friendly.
2. Pla orm Independence:
o Web pages created using HTML work across various browsers
and devices.
3. Scalability:
o The content structure can be enhanced using modern
technologies like CSS and JavaScript.
4. Interac vity (DHTML):
o DHTML allows elements to change dynamically without
reloading the page.
HTML Document Features & Fundamentals
An HTML document is a text file containing the structure and layout of a
webpage.
1. HTML Document Structure: An HTML document is composed of the
following parts:
o Document Type Declara on:
 Declared at the top as <!DOCTYPE html> to specify the
HTML version.
o HTML Root Element:
 <html>: Encloses the en re document structure.
o Head Sec on:
 <head>: Contains metadata like tle, links to stylesheets,
and scripts.
o Body Sec on:
 <body>: Contains the visible content displayed to users.
Example:
<!DOCTYPE html>
<html>
<head>
< tle>My First Website</ tle>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
2. HTML Syntax Rules:
o Tags are enclosed in angle brackets, e.g., <p>.
o Most tags have opening and closing parts, e.g., <p></p>.
o A ributes provide addi onal informa on about elements,
e.g., <a href="url">.

HTML Elements
HTML elements define the structure and content of a webpage.
1. Crea ng Links:
o The <a> tag creates hyperlinks. The href a ribute specifies the
target URL.
o Example:
o <a href="h ps://example.com">Visit Example</a>
2. Headers:
o HTML provides six levels of headings, from <h1> (largest) to
<h6> (smallest).
o Example:
o <h1>Main Heading</h1>
o <h2>Subheading</h2>
3. Text Styles:
o Commonly used tags include:
 <b>: Bold text.
 <i>: Italic text.
 <u>: Underlined text.
 <mark>: Highlighted text.
o Example:
o <p>This is <b>bold</b> and <i>italic</i> text.</p>
4. Text Structuring:
o <p>: Defines paragraphs.
o <br>: Inserts a line break.
o Example:
o <p>This is a paragraph.</p>
o <p>Another paragraph with a <br> line break.</p>
5. Text Color and Background:
o Use the style a ribute for inline styling.
o Example:
o <p style="color: blue; background-color: yellow;">Blue text on
yellow background.</p>

Forma ng Text
1. Basic Text Forma ng:
o <strong>: Strong importance (usually bold).
o <em>: Emphasized text (usually italic).
o Example:
o <strong>Important Text</strong>, <em>Emphasized
Text</em>
2. Superscript and Subscript:
o <sup>: Superscript (e.g., for exponents).
o <sub>: Subscript (e.g., for chemical formulas).
o Example:
o H<sub>2</sub>O, E = mc<sup>2</sup>
3. Code Forma ng:
o Use <code> to display code snippets.
o Example:
o <code>print("Hello World")</code>

Page Layouts
1. Divisions (``):
o Used to group content into logical sec ons.
o Example:
o <div style="border: 1px solid black; padding: 10px;">
o Content inside a container.
o </div>
2. Sec ons (** and **):
o <sec on>: Groups related content.
o <ar cle>: Represents independent content.
o Example:
o <sec on>
o <ar cle>
o <h2>Ar cle Title</h2>
o <p>Ar cle content.</p>
o </ar cle>
o </sec on>

Working with Images


1. Inser ng Images:
o The <img> tag adds images to a page.
o Example:
o <img src="image.jpg" alt="Descrip on" width="400"
height="300">
2. Background Images:
o Applied via CSS styles.
o Example:
o <div style="background-image: url('background.jpg'); height:
200px; width: 400px;"></div>

Lists
1. Ordered Lists (``):
o Displays items in a numbered format.
o Example:
o <ol>
o <li>First Item</li>
o <li>Second Item</li>
o </ol>
2. Unordered Lists (``):
o Displays items with bullet points.
o Example:
o <ul>
o <li>Item A</li>
o <li>Item B</li>
o </ul>
3. Defini on Lists (``):
o Consists of terms and their defini ons.
o Example:
o <dl>
o <dt>HTML</dt>
o <dd>HyperText Markup Language</dd>
o </dl>

Table Crea on and Layouts


1. Basic Table:
2. <table border="1">
3. <tr>
4. <th>Header 1</th>
5. <th>Header 2</th>
6. </tr>
7. <tr>
8. <td>Data 1</td>
9. <td>Data 2</td>
10. </tr>
11. </table>
12. Row and Column Spanning:
o rowspan and colspan a ributes merge rows and columns.
o Example:
o <td rowspan="2">Spanning Rows</td>
o <td colspan="2">Spanning Columns</td>

Forms and Menus


1. Crea ng Forms:
o Collects user input with <form>.
o Example:
o <form ac on="submit.php" method="post">
o <label for="username">Name:</label>
o <input type="text" id="username" name="username"
placeholder="Enter Name">
o <input type="submit" value="Submit">
o </form>
2. Radio Bu ons:
3. <input type="radio" name="gender" value="male"> Male
4. <input type="radio" name="gender" value="female"> Female
5. Checkboxes:
6. <input type="checkbox" name="agree
7.

You might also like