HTML MASTERY: CRAFTING
WEB EXPERIENCES
How to Write and Execute HTML Programs
By,
Sajiya & Team
INTRODUCTION
• Welcome to the dynamic world
of web development!
• HTML, or Hypertext Markup
Language, serves as the
foundational language for
creating web pages and
structuring their content.
• HTML elements are the
building blocks of HTML pages.
• HTML elements are
represented by <> tags.
BASIC HTML
STRUCTURE
• This is a basic HTML code for a simple
web page.
• It includes the structure of an HTML
document, with the <head> section
containing metadata and links to external
resources, and the <body> section
containing the actual content of the web
page.
• This code would create a web page with
the title "My Web Page" and the content
"Welcome to My Website.
• This is a simple web page created with
HTML."
<html>: Document root.
<head>: Meta-info hub.
<body>: Main content.
Headings <h1> to <h6>: Hierarchy.
HTML
ELEMENTS <p>: Text paragraphs.
<a>: Hyperlinks.
<img>: Image embedding.
Lists <ul>, <ol>, <li>: Ordered & unordered.
WRITING YOUR FIRST HTML
PROGRAM
HTML Structure: Add Content: View in Browser: Key Elements: Next Steps:
html html Save as "index.html." <html>, <head>, Explore more HTML
<!DOCTYPE html> <h1>Hello, Open in a browser. <title>. tags.
<html> <head> World!</h1> <p>My <body>, <h1>, <p>. Dive into advanced
<title>My First first HTML features.
Page</title> </head> program.</p>
<body> </body>
</html>
TEXT AND FORMATTING IN HTML
Basic Text: <p><strong>Bold</strong> and <em>italic</em> text.</p>
Headings: <h1>Main</h1> <h2>Sub</h2> ... <h6>Lowest</h6>
Line Breaks: <p>This is<br>on a new line.</p>
Horizontal Line: <p>Above</p><hr><p>Below</p>
Preformatted Text: <pre>Formatted text.</pre>
Text Alignment: <p style="text-align:center;">Centered Text</p>
List Styling: <ul><li>Bullet 1</li><li>Bullet 2</li></ul> <ol><li>Number 1</li><li>Number 2</li></ol>
ADDING LINKS AND IMAGES
LISTS AND TABLES
Definition List:
Unordered List:
Ordered List: Item Term 1 - Definition
First Item, Second
1, Item 2, Item 3 1, Term 2 -
Item, Third Item
Definition 2
Simple Table: Row Table with Nested Lists: Item
1, Col 1 | Row 1, Headers: Name | 1, Item 2 (Subitem
Col 2; Row 2, Col Age; John | 25; 1, Subitem 2),
1 | Row 2, Col 2 Jane | 30 Item 3
• Internal CSS:
• Styles embedded in HTML using `<style>` tags.
CSS • External CSS:
• Link an external stylesheet with `<link>`.
INTEGRATION
• Inline CSS:
• Apply styles directly to an element using the `style`
attributes.
Local File:
Open HTML files directly in the browser.
IDE: EXECUTION
Use code editors like VS Code for live preview. AND
Browser Tools: BROWSER
Right-click to open with a browser, inspect elements. PREVIEW IN
Online Editors: HTML
Code and preview on platforms like CodePen.
CONCLUSION
• In conclusion, mastering HTML is an essential
step on your journey into web development.
• By understanding the basic structure,
elements, and incorporating CSS, you've
unlocked the power to create visually
appealing and interactive web pages.
• Remember, practice is key. Create,
experiment, and explore. As you delve
deeper into HTML and its intricacies, you'll
gain the confidence to craft compelling web
experiences. Whether you're building a
personal website, contributing to a project, or
pursuing a career in web development, HTML
is your foundation. Happy coding!
