Scribd
Upload
16 views11 pages

How To Write and Execute A HTML Program

This document provides an overview of HTML including its basic structure, common elements, adding links and images, lists and tables, integrating CSS, and executing and previewing HTML code. It covers the foundational concepts needed to get started with HTML and web development.

Uploaded by

Abby
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
16 views11 pages

How To Write and Execute A HTML Program

This document provides an overview of HTML including its basic structure, common elements, adding links and images, lists and tables, integrating CSS, and executing and previewing HTML code. It covers the foundational concepts needed to get started with HTML and web development.

Uploaded by

Abby
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/ 11

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!

You might also like