HTML101: A Beginners Guide To Code
Introduction
Welcome to day one of your web development beginner’s course. Today is the day of HTML! HTML is all about structuring the data. It doesn’t concern itself with how something looks; that’s what CSS is for, which we’ll study tomorrow.
Just like a building is only as strong as its foundation, HTML is the skeleton that holds everything together. To put it in a more web-based context, HTML makes sure the page is usable on a variety of devices and browsers and provides a structure for adding CSS, JavaScript, and the content of the website or application itself.
What are we going to do today?
- Learn about HTML and basic HTML syntax
- Learn about the various HTML elements that we’ll use in this course
- Create the basic structure for our own webpage
Ready for another adventurous day of data, structure and magic? Let’s go!
1. HTML
We’ve already learned that HTML is a type of language that structures content; in other words, it labels different elements such as images and text in order to tell your browser how to display the content and in what order.
Element tags
We’ve already known a few HTML elements. You can think of an HTML element as an individual piece of a webpage, like a block of text, an image, a header, and so on. Today you will used a heading element, h1, which looked like this:
Hello World
READ ALSO » JS101: A Beginners Guide To Javascript
Every HTML element has HTML tags, and a tag (or) is surrounded by angled brackets like < and >. Tags define elements and tell the browser how to display them (for example, they can tell the browser whether an element is an image or a paragraph of text).
Most HTML elements have an opening tag and a closing tag that show where the element begins and ends. The closing tag is just the opening tag with a forward slash (/) before the element name. We can generalize the format of an HTML element as follows:
Here, content is something we add. It can be anything, like “Hello world” in our h1 example; ‘element name’, however, has to be one of the predefined tags like h1, h3, p or strong.
Element attributes
HTML elements can have certain attributes that modify their functionality and behavior. These attributes are written inside the opening tag. For example,
We have an image element with a “width” attribute with the value 300 and “height” attribute with value 200, which as you might guess, will make the image 300px wide and 200px tall. Let’s look at another example.
The very aptly named textarea element will display a text input field where our users can write text. In this example, rows and cols are attributes that define the number of rows and columns the textarea should span respectively.
Attributes like width and height for img, or rows and cols for textarea are useful directly within HTML. But some attributes have a special meaning—meaning that they don’t do anything on their own, but require us to write additional CSS or JavaScript, and thus connect the three pillars together—and we’ll be learning more about them later in this course.
READ ALSO » CSS101: A Beginners Guide To Beauty Style Of Webpage
Note that some elements don’t have any content in them, and hence they don’t have to have a closing tag. Images, for example, only need a “src” attribute (short for source, or the location to find the image).
Notice the /> at the end (instead of ). This is because image elements have a source attribute (src) which fetches the image to be displayed. There’s no content that needs to go inside. There are other elements, similar to img, that don’t require a closing tag.
Other rules
Apart from these, there are a few basic rules that apply to all HTML pages. For example, The outermost HTML element needs to be itself. Similarly, all ‘visible’ content goes into while all configuration / metadata (data about the page itself) goes into .
2. HTML elements
Now that we have a basic understanding of HTML elements, let’s look at some of the elements that we’ll be using in this course.
Headings
Headings are exactly as the name suggests. In HTML, there are six headings, ranging from h1 to h6. Heading 1, or h1, is the largest and most significant heading; it signals that this is the most important text on the page.
This is a heading 3
The significance decreases gradually as we move towards h6.
Anchor Links
The anchor element, a, enables the HyperText in HTML. It can link to another page on the same or a different website. Here’s how to create an anchor link to Teamboma’s homepage:
For more information, check out
READ ALSO » Roadmap To Become A Backend Developer For Beginners
Paragraphs
The paragraph element, p, is used for text blocks. We usually style paragraphs such that they have a nice space between one another and between the first paragraph and its heading.
This is a paragraph
Lists
Lists are very useful for displaying data in an ordered or unordered list. For ordered lists (a list that uses numbers) we use
- . Here’s an example:
Divisions and spans
Everything on a webpage can be imagined to be contained in a series of boxes. Our job as web developers is to arrange these boxes so that the whole page looks nice on all screens. These boxes contain text, images, and everything else that we see on webpages.
The names of these boxes are divisions (div) and spans (span). Divs and spans don’t do anything on their own, but we add things to them, like text and images, and they let us position the text and images as we like.
A good analogy for divs and spans are bags. Bags like handbags or backpacks are not very useful by themselves. No one would carry an empty bag around. They become useful when we store stuff in them–they help us keep things organized. That’s how we like to think of divisions and spans. They’re containers for the actual functional elements on your webpage.
We’ll see how they work when we add them to our page below.
Forms
We fill in forms all the time on the internet. Forms and form elements allow us to accept user input. Whether it is for logging into our social media accounts or posting a tweet, anywhere you see a place to add text or click a button or toggle a checkbox, there’s an HTML form element in the background.
3. Your turn: Creating the basic page layout
Play with our try it editor for more practising. Thanks for reading, more coming from TEAM BOMA
- Unordered item 1
- Unordered item 2
- Ordered item 1
- Ordered item 2
