When inserting image into web page, there is no need to have ending img tag with a slash. One img tag is enough.
Attribute src will lead to image location on your device. To simplify things, keep image you want to insert into same folder where you have web page you are working on.
In this case, image extension is .jpg, and image name is trol.jpg:
<img src="trol.jpg">
You can set image width using pixels, like this:
<img src="trol.jpg" width="250">
Also, we can set height of the image, like this:
<img src="trol.jpg" alt="Place for Trol Image">
To set alternative text for image, in case that for some reason image can't be loaded, but we need explanation for end users what is happening, use alt attribute:
<img src="trol.jpg" alt="Place for Trol Image">
This is our simple web page, with same image inserted using all options we mentioned:
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
</head>
<body>
<h1>Image in Web Page - How To</h1>
<img src="trol.jpg">
<br>
<img src="trol.jpg" width="250">
<br>
<img src="trol.jpg" width="250" height="300">
<br>
<img src="trol.jpg" alt="Place for Trol Image">
</body>
</html>
Description lists are like a dictionary, or key value pairs. Basically, we will have a keyword and more details about that keyword.
To create description lists, we will use dl element. Inside dl element, for every keyword we will have dt tag, and corresponding explanations with dd tags.
Very simple indeed, but very useful especially when you are creating your first simple Content Management System, where there is need to return simple reports.
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
</head>
<body>
<h1>Definition Lists</h1>
<dt>Something Short</dt>
<dd>Something more about thing from above</dd>
<br>
<dt>ABBA</dt>
<dd>One of the greatest bands of all time</dd>
</body>
</html>
If listings of some items are needed, we will use unordered lists. Inside ul html element, for every item, we will have li element with real content in it.
Both ul and li elements need to be opened and closed properly with a slash at the start of ending tag.
Because order of items is not important we can use attributes: disc, circle, square or none.
We can have other html elements between ul sections, like paragraphs, headings, tables, forms and other.
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
<meta charset="utf-8">
<meta name="description" content="Free Security Tutorials">
<meta name="keywords" content="it security, pentesting, hacking">
</head>
<body>
<h1>Unordered Lists</h1>
<ul type="disc">
<li>This is row - 1</li>
<li>This is row - 2</li>
<li>This is row - 3</li>
</ul>
<ul type="circle">
<li>This is row - 1</li>
<li>This is row - 2</li>
<li>This is row - 3</li>
</ul>
<ul type="square">
<li>This is row - 1</li>
<li>This is row - 2</li>
<li>This is row - 3</li>
</ul>
<ul type="none">
<li>This is row - 1</li>
<li>This is row - 2</li>
<li>This is row - 3</li>
</ul>
</body>
</html>
Setting up vertical difference between html elements is extremely easy. We will use br tag. That tag is single, which means, theres no need to close it.
We can also have horizontal lines in web page using hr tag, which is also single.
We can set specific color for a horizontal line using color attribute, but also there's size and width attributes.
For width attribute use numbers, and for size attribute use percents.
In this tutorial we are introducing a color attribute for font elements. You can use plain english words to set color, or Hex Codes that represent specific color.
Hex Codes start with hashtags. You can find a list of them on this Wiki page.
Many combinations of colors are possible and you will have a lot of other options in CSS, once we are done with this HTML course. Don't try to memorize Hex Codes, because all those values are available on specialized sites - Hex Code Generators.
Sure, we can combine size and color attributes.
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
<meta charset="utf-8">
<meta name="description" content="Free Security Tutorials">
<meta name="keywords" content="it security, pentesting, hacking">
</head>
<body>
<p><font color="red">This font is red</font></p>
<p><font color="green" size="7">This font is green - size 7</font></p>
<p><font color="orangered" size="2">This font is orangered - size 2</font></p>
<h3><font color="#7C0A02">This H3 is done using HEXs</font></h3>
</body>
</html>
In HTML we will use font tag in combination with size attribute do define font size. Plain HTML allows seven font sizes, Level 1 is smallest one, and level 7 is biggest one.
Just note that font element must be inside p element, because in same p element you can have a lot of other text with different color and size.
When we learn CSS, you will have a lot of other options to style font in general.
To define preformatted text in HTML we will use pre tag. Preformatted html element is useful when we need to preserve how that text, or source code in some programming language look alike.
With pre element we will preserve original spaces and line breaks.
While preserving source code of some programming language that uses arrows as part of instruction, those arrows must be replaced with their HTML equivalent.
That's common mistake for a lot of beginners.
Inside preformatted element we can have other tags, as code for computer code representation, samp for sample of program output, kbd as keyboard input and var for stating variables.
For the most part, simple code section into pre section will get the job done.
Please, pay strict attention about left and right arrows while inserting, for example, C++ source code inside web page.
You are strongly advised to watch YT video below this example, on WebDevPro channel.
#include <iostream>
using namespace std;
int main() {
cout << "Our custom string to print" << endl;
return 0;
}
With paragraphs we will start the new block of text. We must open and close p tags. Don't forget slash at the start of ending p tag.
Browsers automatically add vertical space between paragraphs. Between them we can have headings, images, tables and so on. We will learn about those combinations in future tutorials.
With basic html options we can have simple font styles. For example, we can bold text, italic it, have some sections subscripted or superscripted.
Our text in the paragraph can look like computer code, or to have middle line through it using del tag.
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
<meta charset="utf-8">
<meta name="description" content="Free Security Tutorials">
<meta name="keywords" content="it security, pentesting, hacking">
</head>
<body>
<p>This end is <b>bold</b></p>
<p>This <i>part is italic</i></p>
<p>Normal text, <sup>superscript text</sup></p>
<p>Normal text, <sub>subscript text</sub></p>
<p>This <del>par is not valid any more</del></p>
<p><code>This look like source code, or machine-alike</code></p>
</body>
</html>
We have six levels of headings in HTML. Level 1 will provide biggest font size, and level 6 smallest font size. We will use h tag to set headings.
Vertically, you can interchange their positions, like level 1 and level 2 and level 1 again, but that's just for experimentation. After specific heading we can have paragraphs, forms, images, tables and other html elements.
Sure, CSS will give us much better option to style HTML headings, and other html elements.
Of course, headings goes inside body section of web page, not into the head section. Headings are part of real content.
Meta description, as other metas will go inside head section of web page. Meta description will be same, or similar to title. It is useful for search engines to describe web pages in SERP-s, Search Engine Result Pages. Also, social networks use it when you are sharing links to websites.
Meta keywords hold words that are also found in web page content, but don't overdo it to try to trick search engines, because they are smart these days. Long gone are time when you can trick search engines by putting as much words in meta keyword element.
Keywords are delimited by comma.
There are many metas, and over time you will learn about them, but don't try to memorise them.
Meta elements are tags used in HTML/XHTML to provide metadata about web page. Please note, on left side of it we have command meta and than different attributes, as charset, description, keywords and so on, with specific value on right side.
There's no need to close meta tag.
If you have time, you can read more on dedicated Wiki page for Meta Element.
In one of the previous tutorials, we mentioned title element. It's used to name Web Page in the upper left corner of the browser and to use it when we are saving that page to the local device. Nothing special here.
Comments are extremely valuable while coding or programming. Think about them as internal documentation that will be inside web page visible to you and other programmers, but not directly visible to end users when they are browsing.
Comments are simple and short explanations. You will also find them in programming languages, not just in HTML and CSS. They are created using special codes, depending on programming language used.
In HTML comments are created in this way:
<!-- This comment will explain code -->
<!-- a bit more -->
In browsers comments are visible if you go to "View Page Source" option, usually with right mouse click.
Important - think about security while creating comments, do not reveal internal stuff to end user.
In HTML they are usually used to mark sections of page and to explain stuff for other programmers. You can have them all over the place, between html elements.
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8">
</head>
<body>
<!-- This comment will explain code -->
<!-- a bit more -->
<p>Actual Content</p>
</body>
</html>
In last tutorial we mentioned meta charset topic with conclusion that we will be ok for the most time with UTF-8. But you are strongly advised to visit Wikipedia page on UTF-8 encoding to grasp all other possibilities and options if you will create pages in language different than english.
As stated on Wiki: "UTF-8 is by far the most common encoding for the WWW, accounting for over 97% of all web pages, and up to 100% for some languages, as of 2021."
While coding your html pages, if some local characters are not represented as they need to be in browser, check for appropriate charset.
Okay guys let's start typing some HTML codes here. Question is, what to put at the very top of every page you are going to create?
Well, it's really not important how you're going to create html pages, manually or you will learn PHP, Python and create stuff dynamically like your own content management system. So whatever method you choose at the very top, there must be doctype declaration and that thing means that you are telling your browser to apply specific rendering rules to that page.
If you don't do that page can be totally messed up at the end user side.
So let's talk about different versions of doctype declaration. Go to google and type "w3c doctype declarations" and you will probably land on this link.
While scrolling note a lot of HTML variants and versions. That was mess I was mentioning in first tutorial. But now we have HTML version 5 which is great. That version will save you a lot of headaches. The bottom line, just put this at the top of every html page you will create:
<!DOCTYPE html>
After that we have html opening and closing tags. Think about them as borders around some state. All other tags plus real content will go between html tags.Don't forget arrows and slash at the start of ending html tag, like this:
<!DOCTYPE html>
<html>
</html>
Ok, between html tags we must have two important sections. Also with opening and closing tags, but this time that's head and body tag.First goes head section, and than body section.
In between head tags we will put stuff important for search engines. In between body tags we will put actual useful content for the end user that will be presented in their browsers.
First head section, and than body section, like this:
So far so good. In head section we will put title tag and meta charset. Title element consist of title tags on left and right side, and content in between. That content is just thing that will be visible in the upper left corner of most browsers. It will also be used as name for the file if you decide to save it from web server on you local PC. It's just a name for web page.
Meta charset is just way to tell browsers how to render characters. If you don't have it in head section, some characters on some end devices can be presented in the weird way. Use command UTF-8 to make sure that most of the browsers will render page content nicely in many countries with different languages. For the most time you are ok with UTF-8, but they are many more charsets.
We don't have real content for the end user yet, but it's fine for now:
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
And now stuff for end users. Use p tags on left and right side to set borders for useful content. You can have as many p elements as you need. Bottom line, html elements consist of opening and closing tag with content in between. Closing tag goes with the slash. Sometimes tags don't need slashes, but you will learn wich one over time.
Don't try to memorize, just go with the flow. Don't forget arrows.
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8">
</head>
<body>
<p>Web Page Content Goes Here</p>
</body>
</html>
