MORE HTML TAGS - WRITING HTML CODES AND CODE EDITORS
MORE HTML TAGS - WRITING HTML CODES AND CODE EDITORS
MORE HTML TAGS - WRITING HTML CODES AND CODE EDITORS
Welcome back, in our last tutorial we introduced html we talked about its introduction and also gave reference to showcase the use and its role in the early web. At the end, we created a simple web page and then understood what all the basic html tags actually do and their functions.
In today's article, we will continue with html tags and other special tags that can be used in html to achieve certain semantics. As we discussed earlier, html tags are used to define how the web browser will format and display the content of a web page. It makes it possible for a web browser to differentiate between HTML content and a simple content.
Let us look at the topics to be treated today, since the last article was an introductory one, this will center on making a beginner understand html core usage and tags
TOPICS
- Text Editors for writing html codes.
- Html page structure.
- Html tags and examples in code.
- Nesting html elements
- Html Images
TEXT EDITORS FOR WRITING HTML CODES
A text editor is an application software that allows a user, coder or programmer to edit and create text or codes. Most text editors are free and open source for public consumption, they are very useful and easy to access.
Some examples are:
Vscode, Atom, Sublime Text, Nano, Vi, Vim, etc.
The most popular and also the recommended text editor is Vscode Visual studio code. The installation of this software is very simple and self explanatory and thus it will be easy to load it unto your computer system.
The picture below should make you fully recognize the vscode user interface and get you familiarized with it.
HTML PAGE STRUCTURE
The html page structure is a very important yet neglected part of html. It is very important for anyone that wants to master html and become very good at it. All html pages have a certain hierarchy they follow in order to be recognized by browsers. As you get deeper into coding more complex projects you will start to understand the real need for most of these elements but for now just read and follow the codes to understand them.
The pages structure defines the compulsory codes that enable a browser to read an html page and also the tags that come before and after each other. Let us look at the diagram below.
You can see that there is a layout to how tags are placed and used on the web page and some tags are nested inside other tags. Just like your essays are written in languages, the web pages require structure to be meaningful and functional. Let us pay attention to the diagram below:
It is very important to note that when saving html files, the extension “.html” is very compulsory when naming to enable the computer to read it as a html file when saved.
HTML TAGS AND EXAMPLES IN CODE
This section will focus on html and enable us to write our first html code in our code editor. The first step is to start the code editor and save the file with the “.html” extension. Once we do this we can visit the basic html codes required for web pages and understand what they do.
The code above is an example code page and we will take a look at the functions of all tags present in the above image.
All html documents start with <!DOCTYPE html>, it is compulsory and helps browsers display web pages correctly. It is not case sensitive and it is for html 5
<!DOCTYPE html>A HTML page itself begins with html and ends with html, it is essential
<html> Content </html>Every single element that will appear on a webpage is nested inside the body tag, it is very essential and used to distinguish the head and body areas. <html> </html>.
NESTED HTML ELEMENTS
All html elements can be nested, this simply means that they can contain other elements. All html elements consist of nested elements. Let us take the example below and understand this.
The html tag is the root element and it defines the whole document, It has a start tag <html> and an end tag </html>. Inside the html tag there is a body tag that contains every single element that will be displayed on the webpage.
<html> </html>The <h1> tag defines a heading and like other tags it has an opening “<h1>” and a closing “<h1>”.
<h1> </h1>This is the same with the “<p>” tag, it has a starting and ending tag.
<p> </p>HTML IMAGES
Images can be put in html pages with the “<img>” and we are going to explore them right now, do not be scared as they are not complex and they are very easy to understand and implement in webpages. Let us look at the syntax below!
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">You can see the above code for an image in html. The first thing to bear in mind is that whatever image to be used must be placed in the same directory as the html file project so that it can be accessed by the html file.
- The <img> is necessary and must always be present
- The “src” attribute is where the address/name of the image is to be put, please note that for all images the format extension must be concluded like jpg, png and more.
- The “alt” attribute is there to provide extra information about the image, it is used when images are loading slowly and for on screen readers for the physically challenged.
- The width and height properties usually specify the width and height properties for the particular image. It is currently advised to leave all the styling and sizing to css and we will get accustomed to it soon.
With html images covered and all the examples given, we can basically understand how html works and all other intermediate concepts. Advanced tags will be next, but for now practice and keep coding!
What's Your Reaction?
