By the end of this lesson, you should be able to:
- Define HTML
- Understand Basic HTML Syntax
- Use Basic HTML Syntax
This module is only an introduction to HTML and CSS. HTML and CSS are the building blocks of everything you see on the web. HTML and CSS are not programming languages, as they do not involve logic. HTML is the raw data that makes up a webpage: tables, lists, input and output boxes. CSS adds style to the raw data.
{% hint style="info" %} Modules 5 and 6 are technically not necessary to complete Projects 2 or 3, as all of the relevant programming logic and JavaScript syntax are covered in Modules 1 through 4. These Modules assist in making your projects look better or more interactive. {% endhint %}
When we learnt JavaScript, we first learnt the programming concepts before we learnt the specific syntax. This will be the same for HTML and CSS. We will not be exploring all HTML elements or all CSS styles and syntax, that would be like trying to learn a new human language by reading the dictionary and memorising every word. Try not to worry about learning and knowing all possible HTML attributes or all style properties. Instead, try to approach it with creative discovery: "How can I achieve this effect or style?". Try to achieve something new, and read new code. Embrace creative discovery!
HTML pages and the software that transfers them are the foundation of the browser-based internet. A browser's fundamental task is to display HTML documents and handle built-in HTML behaviours. A HTML file to a web browser is akin to an .mp3 file to an audio player.
HTML stands for Hyper Text Markup Language. In the same way you can use certain tags to make words bold, italic, or strikethrough in a text messaging app like WhatsApp, HTML defines tags that mark-up plaintext files to be formatted differently when opened by a browser application.
All browsers have an HTML engine built in that can read and interpret the syntax in an HTML file.
Tags tell the browser what type of elements are on the page and also how those elements relate to each other. Just like an editor would mark up content of an article, a programmer can mark up a web page by using tags and attributes.
The first thing to learn is the proper syntax of a basic HTML page. HTML uses tags wrapped around content to control the flow and look.
For example, a paragraph tag is used to surround the text of the paragraph and let the browser know that it is a paragraph. The browser then applies its default styling to the paragraph. The paragraph tag looks like this:
the p is called the opening tag and the /p is called the closing tag. Both must be included to tell the browser where the paragraph begins and ends. What is written between the tags is displayed on the browser page, not the tags. Most tags have an opening and closing tag with the content in between.
Tags are generally nested inside each other to maintain structure and flow of content.
These are some common HTML elements, and their tags:
| HTML Tag | Element |
|---|---|
| <head> | A container for metadata of the webpage, such as the page title or logo. |
| <body> | The body of the HTML page, contains all other HTML elements that are rendered and displayed by the browser. |
| <div> | A div, or division, is a generic container for HTML elements. |
| <p> | A paragraph. A new line is automatically added before and after a paragraph. |
| <b>, <i> | Bold, italics. Usually used within another HTML element, like <p> or <div> |
| <h1> to <h6> | Used to defined headers on a page. |
| <button> | Buttons! |
| <input> | An input field where user can enter data. |
| <a> | Anchor, used to link other pages or website. |
| <img> | Used to embed an image in an HTML page. |
| <script> | Used to incorporate JavaScript syntax. |
| <style> | Used to incorporate CSS syntax. Used within <head>. |
You can explore more HTML elements and tags here.
HTML elements have _attributes; a_n attribute is used to define the characteristics of the element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value.
An ID is a unique identifier for an HTML element. Only one ID can be applied to an element, though if you break this rule you won't get any errors, maybe just some unintended behaviours. Having a unique ID allows for a user to programmatically select and manipulate the associated element**,** which we will learn how to do later.
<p id="player-card-one">ace of spades</p>
The style attribute allows us to define how the element appears on the screen. For example, if we wanted to change the font color of our paragraph element, we might do so using the style attribute like this:
<p style=“color: red;”> This text would be red </p>In this case, the name of the attribute is style and the value is "color: red", which can be confusing. In earlier versions of HTML, there was a colour attribute, and a different attribute for background-colour, and so on, which were all eventually subsumed under the style attribute. This requires the value of the style attribute to specify what style property is being defined. The style attribute also allows for the defining of other properties, such as changing the font-size or adding a border to an element. We will learn more about styling next.
- Read through the
index.htmlfile from the template starter code. - In any of your HTML files, add a new HTML element.
- Edit the element's background colour using the style attribute.