Web Design Blog Post 1

Web Programming

This month’s course is web programming, this week's emphasis is on learning HTML basics and creating webpages in a text editor (Apple=TextEdit), or (Windows=Notepad).
Even if you use a website builder or content management system, understanding HTML helps you troubleshoot issues, make custom changes, and improve your site’s functionality.

HTML, which stands for HyperText Markup Language, is the standard language used to structure and display content on the web.
It is not a programming language but a markup language that tells web browsers how to structure a page's content.
HTML uses a system of elements and tags to define different parts of a web page, such as headings, paragraphs, links, images, and more.
Most elements and tags require an opening, with a less than and greater than symbol and a closing with a less than symbol, a / and a greater than symbol.

An HTML document is structured like a tree. It begins with a declaration identifying it as an HTML5 file. The main container is the HTML tag, which wraps around everything.
Inside, the head section might include the page title and references to styles or scripts. In the body section, you add all the visible elements, like text, buttons, and images.

---

Every HTML document follows a standard structure:

• The DOCTYPE declaration defines the document as HTML5
• The HTML element is the root element containing all other elements
• The head section contains meta-information about the document
• The title element specifies the page title shown in the browser tab
• The body element contains all of the content visible on the webpage

Basic HTML Elements

Headings

HTML offers six levels of headings, from h1 (most important) to h6 (least important):

• h1 for main headings
• h2 for subheadings
• h3 for smaller subheadings
• And so on through h6

Paragraphs

Text content is typically placed within paragraph tags, represented by the p element.

Links

Hyperlinks are created with the anchor tag (a), which requires an href attribute to specify the destination URL.

Images

Images are inserted using the img tag, which is self-closing. Important attributes include:

• src: specifies the image path
• alt: provides alternative text description

The alt attribute provides alternative text for screen readers and displays if the image fails to load.

Lists

HTML supports ordered lists (ol), and unordered lists (ul):

• Unordered lists use ul as the container and li for each list item
• Ordered lists use ol as the container and li for each list item

---

After you understand the basics of HTML, you can add images to your webpage, apply CSS elements with the style element, and eventually apply JavaScript to your webpage for interactivity.