Ateica Search engine optimization techniques

Main menu

Pages

Learn HTML to Build a Professional Website 2023

HTML (Hypertext Markup Language) documents are the building blocks of web pages. They are plain text files containing markup, which is used to structure and format the content of a web page. HTML documents are essential for web development, as they define the structure, layout, and content of a webpage that is displayed in web browsers. Here are some key aspects of HTML documents:



  1. File Extension: HTML documents typically have a ".html" or ".htm" file extension. For example, "index.html" is a common filename for the main page of a website.
  2. Text-Based: HTML documents are plain text files that can be created and edited using simple text editors like Notepad (on Windows), TextEdit (on macOS), or more advanced code editors like Visual Studio Code, Sublime Text, or Atom.
  3. Markup Language: HTML is a markup language, not a programming language. It uses tags enclosed in angle brackets (< >) to define elements and their attributes. For example, `<p>` is a tag used to define a paragraph.
  4. Structure: HTML documents are structured with an opening `<html>` tag and a closing `</html>` tag. Within this structure, you have a `<head>` section (for metadata like the title and links to stylesheets) and a `<body>` section (for the visible content of the page).
  5. Elements: HTML documents consist of various elements that define the different parts of a webpage, such as headings (`<h1>`, `<h2>`), paragraphs (`<p>`), links (`<a>`), images (`<img>`), lists (`<ul>`, `<ol>`, `<li>`), and more.
  6. Attributes: HTML elements can have attributes that provide additional information or modify their behavior. For example, the `<img>` element has a "src" attribute to specify the image source.
  7. Nesting: HTML elements can be nested inside other elements to create a hierarchical structure. For instance, you can nest a `<p>` element within a `<div>` element.
  8. Web Standards: HTML documents should adhere to web standards defined by organizations like the World Wide Web Consortium (W3C). Valid and well-structured HTML is crucial for cross-browser compatibility and SEO.
  9. Viewing in Browsers: HTML documents are viewed in web browsers, which interpret the markup and render the webpage accordingly. You can open an HTML document in a web browser by double-clicking the file or entering its URL in the address bar.
  10. Interactive Elements: HTML can be enhanced with interactive elements and functionality using JavaScript, a programming language commonly used for client-side scripting.

HTML is the foundation of web development and serves as the starting point for creating websites and web applications. Web developers use HTML along with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity to build rich and dynamic web experiences.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type and helps browsers display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case-sensitive.

The <!DOCTYPE> declaration for HTML5 is:

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.


How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Click CTRL + U on an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on the fly in the Elements or Styles panel that opens.

Comments