Welcome to HTML Website Study

What is HTML? Hyper Text Markup Lanuguage

Way of displaying information on webpages in your web browser
It is a Markup language not programming language
Programming language (Java or PHP use things like logic and conditions to control the content that you see, not HTML did)
HTML can only view it in your local computer not on the internet

Core Vocabulary

HTML (HyperText Markup Language): The standard language for creating web pages, used to structure content and define its appearance. Core Vocabulary
Markup: The process of using tags to define how content, such as text and images, is presented.
Hypertext: The ability to create links that allow users to navigate between different pages or resources.
Tag: A keyword or label enclosed in angle brackets, used to mark up content (e.g., <p>).
Element: A tag and its content (e.g., <p>This is a paragraph.</p>). Some tags are self-closing (e.g., <br>).
Attribute: Provides additional information about an element and is placed within the opening tag (e.g., <img src="image.jpg">).

Document structure vocabulary

<!DOCTYPE html>: Declares the document to be HTML5.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document, such as the title and links to stylesheets.
<title>: Sets the title that appears in the browser tab or window bar.
<body>: Contains all the visible content of the HTML document, such as headings, paragraphs, and images.

Common content tags

<h1> to <h6>: Heading tags for the document's title and subheadings, with <h1> being the most important.
<p>: Defines a paragraph of text.
<a>: Creates a hyperlink to another page or resource.
<img>: Embeds an image into the page.
<ul>: Defines an unordered list (bulleted list).
<ol>: Defines an ordered list (numbered list).
<li>: Defines a list item, which must be inside a <ul>, <ol>, or <menu> element.

Containers

<div> — block-level container
<span> — inline container
<section> — semantic section
<header>, <footer>, <nav>, <article> — semantic layout elements

Common Attributes

Attribute Purpose.

class Groups elements for styling
id Unique identifier for one element
href Link destination
src Image or media source
alt Text description for images
style Inline CSS

About

Set up folder and Index.html File:

( First is create a Project folder and second is create a text file and save it in the folder. *text, html, and images files need to save in the same project folder)

How to create text file?

Method : Use TextEdit

Open TextEdit: Go to your "Applications" folder and open TextEdit, or search for it using Spotlight.
Set to plain text: Go to Format > Make Plain Text.
Write your HTML code: Type or paste your HTML code into the new document.
Save the file:
1. Go to File > Save.
2. Enter a filename. Example: Text.html.
3. In the save dialog, ensure the file format is set correctly. When prompted about using .html or .txt, choose "Use .html".
Open the file: Double-click the saved file to open it in your default web browser. ( Safari, Gooogle Chrome) This is for reviewing your website.

Writing HTML code on Visual Studio Code

How to create html file?

You should name your main or first web page index.html because it is a universally accepted default filename that web servers automatically look for when a user visits a website's root directory without specifying a particular file.

Open Visual Studio Code: Go to your "Applications" folder and open Visual Studio Code, or search for it using Spotlight.
Click new file.
Type "index.html"
Write your HTML code
Must Save the file or cannot view in browser