...
...
1 |
<title>My First Document</title> |
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My First Document</title> </head> <body> <h1>My First Document</h1> </body> </html> |
Top photo by Janette Campbell with elements from W3C.
Ready to start writing some HTML documents! We need to get your work environment set up first. My preference is VS Code. It's free from Microsoft. There are a lot of IDEs, or integrated development environments, available for you to use. If VS Code isn't to your liking, you can do a quick search for "free IDE software" and find no shortage of opinions on which one is the best.
Depending on which language you choose to program in, you may find another IDE better suited to your goals. However, we are using VS Code to work on our HTML documents.
First things first, we need to get VS Code installed!
Code Spell Checker catches spelling errors. I'm constantly misspelling things, so this has been a must-have.
Live Server allows you to see the changes made to your website dynamically in your browser. This means you don't have to refresh the page each time you make a change. It automatically refreshes the browser for you.
"SonarLint is a free IDE extension that lets you fix coding issues before they exist! Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of C, C++, HTML, Java, JavaScript, PHP, Python, and TypeScript, and you can install it directly from the VS Code Marketplace." - Taken from the extension description.
There are many more extensions to choose from, but these are the ones I suggest for HTML.
Top photo by Janette Campbell with elements from W3C.
HTML, or Hyper Text Markup Language, is the foundation of every website you see on the internet. It's like the bones or skeleton of the website. Without HTML, websites would just be a jumbled mess of text and images, with no organization or structure.
So, if you're interested in web development, learning HTML is an essential first step. It may seem daunting at first, but once you get the hang of it, you'll be well on your way to creating amazing websites of your own!
To start there are three important parts of an HTML document you need to know. The doctype declaration, the head, and the body. You're probably most familiar with the body, it is the part that holds the parts the viewer interacts with. Not to worry, we will talk about the other parts and all will be clear, hopefully.
The first part of an HTML document is the doctype declaration. It looks like this:
1 | <!DOCTYPE html>
|
It tells the browser which version of HTML you are using. This one tells the browser we are using HTML5, which is the latest and most widely used version of HTML. Without this declaration, the website may not display properly.
The next part of the HTML document is the head, not to be mistaken for the header. The head goes inside the HTML tags which look like this:
1 2 3 | <html lang="en"> </html> |
It contains important information the page needs. For instance, the title of the page, the meta information, and the links to CSS stylesheets and JavaScript files. It typically looks like this:
1 2 3 4 5 6 7 8 | <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js" defer></script> <title>Programming Bliss</title> </head> |
In this example, we have the data that tells the browser which character encoding we are using, what to do if it encounters an older version of Internet Explorer, and what the user's visible area is. It also has a link to the stylesheet and the JavaScript file. And lastly, it tells the browser what the title of the page is. The title is what shows up on the browser tab.
The body also goes inside the HTML tags. It typically looks like this:
1 2 3 | <body> </body> |
This is where everything you want people who visit your website to see.
All put together you will typically see the doctype, the head, and the body like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js" defer></script> <title>Programming Bliss</title> </head> <body> </body> </html> |
Now that you know the basic parts of the page, we will get into the fun stuff! Putting content into the <body> tags. The first thing to know is that tags and elements define the structure and content of the page, and how it should be displayed to the user.
HTML tags are used to create the elements that make up a web page, such as headings, paragraphs, links, images, and forms. Each tag is enclosed in angle brackets (< >) and consists of a tag name and optional attributes. For example, the <h1> tag is used to create a top-level heading, while the <p> tag is used to create a paragraph.
An HTML element is made up of an opening and closing tag as well as the content in between. This is what an element looks like:
1 | <p>Hello, world!</p> |
In the above element, we have an opening <p> tag with the content "Hello, world!" and a closing </p> tag.
| Tag | Description |
|---|---|
| <html> | Used to indicate the beginning and end of an HTML document. All other tags and content are contained within these tags. |
| <head> | Used to contain the metadata about the document, including the title, stylesheets, and other information that isn't visible on the page. |
| <title> | Used to define the title of the document, which is displayed in the browser's title bar. |
| <body> | Used to contain the visible content of the document, such as text, images, and other HTML elements. |
| <h1> through <h6> | Used to define headings of different levels, with <h1> being the largest and most important and <h6> being the smallest and least important. |
| <p> | Used to define paragraphs of text. |
| <a> | Used to create hyperlinks to other web pages, files, or locations within the same document. |
| <img> | Used to insert images into the document. |
| <div> | Used to define a division or section within the document, which can then be styled or manipulated separately from other content. |
For a complete list of tags check out W3 Schools.
HTML attributes provide additional information about an HTML element. They are found in the opening tag of an element with the value inside quotes. For an image, there is usually an "src" attribute that tells the <img> tag where to find the image. There is also an "alt" attribute that displays alternative text if the image can't be shown, or if the user is visually impaired. Below is an example of what this looks like.
1 | <img src="/images/landscape.jpg" alt="A beautiful landscape"> |
In the above example, the attribute "src" has the value "/images/landscape.jpg" and the attribute "alt" has the value "A beautiful landscape".
Another common attribute is "href", which specifies the destination of a hyperlink.
1 | <a href="https://blog.janettecampbell.com">Visit Programming Bliss</a> |
In this anchor tag, we see the attribute "href" that contains a URL. This URL is where the link will navigate when clicked. In this case, when the text "Visit Programming Bliss" is clicked, it will take you to "https://blog.janettecampbell.com".
For a complete list of attributes check out the mdn web docs.
Now that you know the basics, head over to "Creating Your First HTML Document". Where we will put what you've just learned into practice!
Top photo by Janette Campbell with elements from W3C.
