top of page
Writer's picturecompnomics

Basic HTML Program Structure









<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  </head>
<body>
  <h1>Heading 1</h1>
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Image description">
  </body>
</html>

Key Points:

  • <!DOCTYPE html>: Declares the document type as HTML.

  • <html>: Root element that encapsulates the entire document.

  • <head>: Contains meta-information about the page, not displayed visually.

  • <title>: Defines the title of the page, displayed in the browser tab.

  • <body>: Contains the visible content of the website.

  • Elements: Defined by opening and closing tags (e.g., <p>, </p>).

  • Attributes: Provide additional information about elements (e.g., src for image source).

  • Comments: Ignored by browsers, used for readability and explanations.


Remember: This is a basic structure, and actual HTML documents can be much more complex with various elements and attributes.


Saving the Document:

  • Choose a text editor: Any plain text editor will work, like Notepad on Windows or TextEdit on Mac. However, code editors like Visual Studio Code or Atom offer additional features like syntax highlighting and auto-completion, making it easier to write and edit HTML.

  • Save the file:

  • Choose a suitable file name (e.g., "my_website.html").

  • Make sure to set the "Save as type" to "All files" or "Text Only" to avoid adding unnecessary extensions.

  • Choose a location to save the file, like your desktop or a dedicated folder for your projects.

2. Viewing the Document in a Browser:

  • Open your web browser: Chrome, Firefox, Edge, or any other browser you prefer will do.

  • Open the saved HTML file:

  • Drag and drop the file onto the browser window.

  • Use the browser's menu to "Open File" or "Open With" and select your HTML file.


This is a basic guide. As you delve deeper into HTML, you'll encounter more sophisticated techniques and tools for creating complex and interactive web experiences. Keep learning and building!

22 views0 comments

Recent Posts

See All

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page