top of page

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. 

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 

  1. Open TextEdit: Go to your "Applications" folder and open TextEdit, or search for it using Spotlight.

  2. Set to plain text: Go to Format > Make Plain Text.

  3. Write your HTML code: Type or paste your HTML code into the new document.

  4. 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".

  5. 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?

​

  1. Open Visual Studio Code: Go to your "Applications" folder and open Visual Studio Code, or search for it using Spotlight.

  2. Click new file.

  3. Type "index.html"

  4. Write your HTML code

  5. Must Save the file or cannot view in browser

bottom of page