Scribd
Upload
11 views8 pages

HTML Basics: Structure, Elements, and CSS

HTML, developed by Tim Berners-Lee in 1991, is the standard language for creating web pages, structuring content with elements and tags. It works in conjunction with CSS and JavaScript for styling and functionality, and includes various components such as headings, paragraphs, links, images, and forms. The document also covers HTML editors, basic structure, elements and attributes, as well as CSS styling methods and color specifications.

Uploaded by

Soumyajit sen
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views8 pages

HTML Basics: Structure, Elements, and CSS

HTML, developed by Tim Berners-Lee in 1991, is the standard language for creating web pages, structuring content with elements and tags. It works in conjunction with CSS and JavaScript for styling and functionality, and includes various components such as headings, paragraphs, links, images, and forms. The document also covers HTML editors, basic structure, elements and attributes, as well as CSS styling methods and color specifications.

Uploaded by

Soumyajit sen
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

HTML: HYPERTEXT MARKUP

LANGUAGE
DEVELOPED BY TIM BERNERS-LEE IN 1991
 HTML is the standard language for creating web pages.
 It structures web content using elements enclosed in tags.
 Works with CSS and JavaScript for styling and functionality.
HTML Editors & Basic Structure
• Editors: Notepad, VS Code, Sublime Text, Brackets.
• HTML files use .html extension.
• Basic Structure:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Title of the page</title>
5. </head>
6. <body>
7. <h1>Welcome to HTML</h1>
8. </body>
9. </html>
Elements & Attributes
• Elements: Basic building blocks of HTML.
a. Block Elements: <div>, <p>, <h1>, <section>, <article>
b. Inline Elements: <span>, <a>, <img>

• Self-Closing Elements: <br>, <hr>, <img>.

• Attributes: Provide additional information.


Examples:
[Link]: Unique identifier for an element.
[Link]: Groups multiple elements for styling.
c. style: Inline CSS for styling an element.
[Link]: Specifies the URL for a hyperlink.
[Link]: Defines the source of an image or media file.
f. alt: Provides alternative text for an image.
Headings, Paragraphs &
Formatting
• Headings: <h1> to <h6>, <h1> is the largest.
• Paragraphs: <p> defines a paragraph. <p>Hello</p> Output: Hello
• Formatting Tags
a. <b> text </b> Output: text
b. <i> text </i> Output: text
c. <u> text </u> Output: text
d. a <sup> 2 </sup> Output: a2
e. O <sub> 2 </sub> Output: O2
f. <strong> text </strong> [It's displayed in bold by default]
g. <em> text </em> [It's displayed in italic by default]
Links, Images & Tables
Links: <a href="URL">Click here</a> (Hyperlink)
Images: <img src="[Link]" alt="Description">
Tables:
<table> Output
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Lists, Layout & Iframes
• Lists:
• Ordered (<ol><li>Item</li></ol>) Output: 1. Item
• Unordered (<ul><li>Item</li></ul>) Output:• Item

• Layout Tags: <header>, <nav>, <main>, <footer>

• Iframes: Embed another webpage


Example: <iframe src="[Link] width="500" height="300"></iframe>
Forms & User Input
FORMS: USED FOR USER INPUT .
• Common Elements:
[Link] of Input: text, password, radio, checkbox, submit.
[Link] Map: Defines clickable areas in an image using <map> and <area>.
• Example
<form>
<label for="name">Name:</label>
<input type="text" id="name">
<input type="submit"
value="Submit">
</form>
CSS & Colors
• CSS (Cascading Style Sheets): Used to style HTML elements.

• Types of CSS:
[Link] CSS: Applied directly to an element using the style attribute.
Example: <p style="color: red;">Text</p>.
[Link] CSS: Defined inside a <style> tag within the <head> section of an
HTML file.
[Link] CSS: Written in a separate .css file and linked using
<link rel="stylesheet" href="[Link]">.

• Colors in HTML:
[Link] Names: red, blue, green.
[Link] Values: #FF5733 (Hex), rgb(255,0,0), hsl(120, 100%, 50%).

You might also like