Step by Step html Tutorial | Basic Guide

z33

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - hypertext markup language
Welcome to Cyberleet's HTML Tutorial! Here you will learn the basics of HyperText Markup Language (HTML), so that you may design your own web pages like the one you are viewing right now!

HTML is not a programming language, but rather a markup language. If you already know XML, HTML will be a snap for you to learn. We urge you not to attempt to blow through this tutorial in one sitting. Instead, we recommend that you spend 15 minutes to an hour a day practicing HTML and then take a break to let the information settle in. We aren't going anywhere!

preparation for html
If you are new to HTML and haven't read through our HTML tutorials for beginners , please take a few minutes to complete that tutorial before moving on.

Creating an HTML document is easy. To begin coding HTML, you need only two things: a simple-text editor, such as Notepad, and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors, and you will probably code a fair amount of HTML with it in your early stages. Notepad++ is another popular favorite among web developers. These innovative text editors are specialized for writing simple code and they utilize color coding to help you write concise code.

brief html background
HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML. We will base our teachings around these widely-accepted coding standards.

web pages
Here are some important facts about why web pages are so useful!

  • They are a low-cost and easy way to spread information to a large audience.
  • The provide yet another medium you can use to market your business!
  • They serve as a platform to let the world know about you!
words to know
Throughout this tutorial, we will be using several terms that are unique to HTML. It is important for you to understand what these words mean, in the context of HTML.

  • Tag - Used to tag or "mark-up" pieces of text. Once tagged, the text becomes HTML code to be interpreted by a web browser. Tags look like this: <tag>
  • Element - A complete tag, having an opening <tag> and a closing </tag>.
  • Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
For now, just understand that a tag a piece of code that acts as a label that a web browser interprets, an element is a complete tag with an opening and closing tag, and an attribute is a property value that customizes or modifies an HTML element.
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - elements
When you land on a website, all the items you see in front of you -- the paragraph texts, the page banners, and the navigation links are all elements of the web page. The term element is a just a name given to any piece of a web page. Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.

An element consists of three essential pieces: an opening tag, the content, and a closing tag.

  1. <p> - opening paragraph tag
  2. Element Content - "Once upon a time..."
  3. </p> - closing tag
A Complete HTML Element:
Code:
<p>Once upon a time...</p>
A single page can contain hundreds or thousands of elements, but when all is said and done, every HTML page should have a bare minimum of four critical elements: the HTML, head, title, and bodyelements.

html - <html> element...</html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.

If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Element Code:
Code:
<html>
</html>
Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.

If you opened up your index.html document, you should be staring at your very first blank (white) web page!

html - <head> element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.

Here's a sample of the initial setup.

HTML Head Element Code:
Code:
<html> <head> </head>
</html>
If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page. So far, all we've done is add a couple of necessary elements that describe the web page document to the web browser. Content -- the stuff you can see -- will come next!

html - <title> element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.

A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.

HTML Title Element Code:
Code:
<html> <head> <title>My Web Page!</title> </head>
</html>
Save the file and refresh the browser. You should see "My Web Page!" in the upper-left bar of your browser window.

Name your webpage as you please. Just keep in mind that the best titles are brief and descriptive.

html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.

HTML Body Element Code:
Code:
<html> <head> <title>My Web Page!</title> </head> <body> <p>Once upon a time...</p> </body>
</html>
Go ahead and view your first complete web page.

html - elements reviewed
To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.

From here on out, the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element.
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - tags
A web browser reads an HTML document from top to bottom, left to right. Each time the browser finds a tag, the tag is rendered accordingly. Paragraph tags render paragraph text, image tags render images, etc. By adding tags to an HTML document, you are not only coding HTML, but also signaling to the browser, "Hey look, this is paragraph text; now treat it as such!"

Do you recall that HTML elements are comprised of three major parts: the opening tag, the content, and the closing tag? As you will learn, there are infinite combinations of HTML tags/elements, including those used for forms, images, and lists. Everything displayed on an web page requires the use of a tag or two.

HTML Tag Code:
Code:
<tag>Content</tag>
<p>This text will be rendered like a paragraph.</p>
Tags should always be written in lowercase letters if you plan on publishing the page online, as this is the web standard for XHTML and Dynamic HTML.

HTML More Tag Code:
Code:
<body>Body Tag
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>
html - elements without closing tags
There are a few elements that do not require formal closing tags. In a way, they still have the 3 parts (opening/closing and content), but they are consolidated into one tag. The reason for this is that these tags do not really require any content to be placed within them, but sometimes may require attributes such as source URLs for images.

One prime, easy example of an HTML tag that does not require a closing tag is the line break tag.

HTML Line Break Code:
Code:
<br />
To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. This would require a tremendous amount of effort,and if every line break tag needed all three components as other tags do, life would become redundant real quick. The better solution is to combine the opening and closing tags into a single format and shorten the number of characters needed to render a line break. Other tags, such as image tags and input tags, have also been modified in such a manner.

HTML Code:
Code:
<img src="../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field
Display:


--Line Break--
As you can see from the above, the web browser is capable of interpreting the image tag as long as we inform the browser where the image file is located, using the src attribute. Attributes will be discussed in more detail throughout the remainder of the tutorial. For now, it's a good time to start thinking about what type of website you want to make. It is always easier to make content for a topic or to achieve a goal.
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - text
Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.

HTML Text is probably the first element most HTML beginners learn to add to any web page, and this is generally achieved through a classic, "Hello, World!" example.

HTML Text Code:
Code:
<html> <head> <title>My Web Page!</title> </head> <body> Hello World! </body>
</html>
html - paragraph text
Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag <p>. This tag is reserved specifically for blocks of text, such as those you would expect to find inside your favorite novel.

HTML <p> Tag Code:
Code:
<html> <head> <title>My Web Page!</title> </head> <body> <p>Avoid losing floppy disks with important school...</p> <p>For instance, let's say you had a HUGE school...</p> </body>
</html>
HTML Paragraph Text:
Code:
Well written HTML documents can gain popularity through Search Engine Optimization and careful coding of your HTML elements.
Precision is important when writing your code. Web spiders are a little forgiving when it comes to malformed HTML elements. For best results, do your best to ensure your code is complete and accurately constructed.
html - headings 1:6
HTML has heading tags which can be used as headers or subheaders. By placing text inside of an <h1> heading tag, for example, the text displays bold and the size of the text increases to a 24pt font size. Heading tags are numbered 1 through 6, and they change size depending on which tag you choose, with 1 being the largest font size at 24pt, and 6 being the smallest font size at 8pt.

HTML Heading Element:
Code:
<body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6>
</body>
Place these lines into your HTML file and you should see results similar to what you see below.

HTML Heading Tags:

headings
are
great
for
titles
and subtitles

Notice that each heading has a line break (a blank line) rendered before and after it. This is a built-in attribute associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag, just like it does with <p> tags. This is expected behavior, and as a designer you need to take these line breaks into consideration when designing a layout. Later on, CSS code can be used to remove these extra line breaks or manipulate the amount of spacing, if needed.

LET US REST TODAY... PLEASE PRACTISE WHAT YOU HAVE LEARNT, WE WIL RESUME SOON
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net


CONTINUATION....

html - formatting text elements w/ tags

As you begin to place more and more text elements onto your website, you may find yourself wanting to incorporate bold or italic properties ing your text elements. HTML offers a handful of special tags that can be utilized to do just that:

HTML Text Formatting Tags:
Code:
<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>
The above code will give you result like this one below

HTML Formatting Text:
An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of struckthrough Text
An example of Computer Code Text

All of these tags add a pinch of flavor to HTML text elements, from paragraphs to lists and text links

html - about formatting text elements
Formatting elements such as <b> should be used sparingly, and what we mean by that is that you should only use them to bold or italicize one or two words at a time. If you wish to bold an entire paragraph, the better solution would involve Cascading Style Sheets (CSS) and adjust the element's font-weight property. You may consult how to do that in our CSS Tutorial. Ultimately, the decision is in the hands of the web designer, but generally, it's best to keep the use of these tags quick and sparse.

html - line breaks
A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return on your keyboard. In short, a line break ends the line you are currently on and resumes on the next line. Earlier, we mentioned that each paragraph element begins and ends with a line break, which creates an empty space between the start of a paragraph element and the end of a paragraph element.

As we've mentioned, line break elements are a little different from most of the tags we have seen so far because they do not require a closing tag. Instead, their opening and closing tags are combined into a single line break element. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within other elements such as paragraphs (<p>).

HTML Format Text:
Code:
<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>
Address:
Code:
Will Mateson
Box 61
Cleveland, Ohio
We have created an address for a letterhead and used a line break <br /> tag inside of a paragraph element to add some line breaks to make this text appear more like an address. Here's another look as we add a signature element to the same letter.

HTML Text Format:
Code:
<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
Vice President</p>
Closing Letter:
Code:
Sincerely,
Kevin Sanders
Vice President
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - <pre> preformatting
A web browser interprets your HTML document as being one long line. Sure, you may have tabs and line breaks in Notepad which align your content so it's easier for you to read, but your browser ignores those tabs and line breaks.

We showed you that you can get around this problem by using the <br /> tag, but tabs and spacing are quite different from one another and can be absolutely annoying at times. One simpler solution might be to use the <pre> tag, which stands for previously formatted text.

Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. Spaces, tabs, and line breaks that exist in your actual code will be preserved with the <pre> tag.

HTML Pre Code:
Code:
<pre>
Roses are Red, Violets are blue,
I may sound crazy, But I love you!
</pre>
HTML Preformatted Text:
Code:
Roses are Red, Violets are blue,
I may sound crazy, But I love you!
 

cyberlord

CEO
Staff member
VIP user
Legendary User
Mar 13, 2018
1,203
3,607
Netherlands
Cyberleets.net
html - attributes
Web page customization begins with HTML attributes. Attributes are like blue print schematics informing the browser how to render an HTML element. As an HTML tag is processed, the web browser looks to these attributes as guides for the construction of web elements. Without any attribute values specified, the browser will render the element using the default setting(s) (usually very boring).

HTML attributes are responsible for customizing web elements. As a web surfer, you've probably seen a vast assortment of color schemes, fonts, and styles -- all of which are brought to you by HTML and CSS element attributes.

html - title attribute
The title attribute titles an HTML element and adds a tiny text pop-up to any HTML element, offering your web viewers a tool-tip mechanism where information can be found or where a better description of an HTML element can be seen.

Much like the tool tips found in word processing programs, this attribute can add spice to any page while offering the user priceless interactivity. As the mouse hovers over the element, a tool tip is displayed, giving the viewer just one extra piece of information.

HTML Title Attribute:
Code:
<h2 title="Hello There!">Titled Heading Tag</h2>
Hover your mouse over the display heading and watch the title attribute in action!

HTML Title Attribute:
Titled Heading Tag

The title attribute is one that has not deprecated and should be used often. Many search engines are capable of identifying this attribute inside your HTML elements, granting increased search rankings based on the relevance of the titleattribute text.

html - align attribute
If you wish to change the horizontal alignment of your elements, you may do so using the align attribute. It allows you to align things left, right, or center. By default, most elements are automatically aligned left, unless otherwise specified.​

HTML Align Attribute:
Code:
<h2 align="center">Centered Heading</h2>
HTML Align Attribute Display:
Centered Heading
HTML Align Attribute Code:
Code:
<h2 align="left">Left-aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right-aligned heading</h2>
HTML Align Attribute Display:
Left-aligned heading

Centered heading
Right-aligned heading
HTML attributes, including align, used to be the primary source for the customization of web elements, but they have now lost their market share to Cascading Style Sheets (CSS). Since most HTML attributes are now deprecated, they should ultimately be avoided in professional-level web design. Nonetheless, having an understanding of HTML attributes will prove to be a tremendous aid for anybody looking to move into professional web development using Cascading Style Sheets.
 
Thread starter Similar threads Forum Replies Date
cyberlord Learn HTML Here 3

Similar threads