Author Topic: HTML knowledge (Read 4682 times)

MSL · « **on:** February 09, 2017, 07:18:17 PM »

HTML knowledge

A thread about the HTML. You may read and share knowledge about the HTML.
Recently we already got some info about it -- HTML quiz tests.

SEO · « **Reply #1 on:** February 09, 2017, 07:34:37 PM »

I wonder if the right place for this is here, but as far as we have no other suggestions, I think it's totally OK to be here.

Wow, I couldn't find another HTML knowledge thread. I thought we (and our members/users) mentioned it many times, but seems it's going to be the 1^st big topic about HTML. Good, good!

So, a HTML Introduction

What is 'HTML'?

So, 'HTML' is the standard markup language for creating Web-pages.

1. HTML stands for "Hyper Text Markup Language".
2. HTML describes the structure of Web-pages using markup.
3. HTML elements are the 'building blocks' of the HTML pages.
4. The HTML elements are represented by tags.
5. HTML tags label pieces of content such as 'heading', 'paragraph', 'table' etc.
6. Browsers don't display the HTML tags, BUT use them to render the content of the page.

MSL · « **Reply #2 on:** February 09, 2017, 09:03:15 PM »

Now you'll see a simple (basic) HTML document. It's a useful and simple HTML example:

Code: [Select]

 <!DOCTYPE html>
<html>
<head>
<title>The Page Title (for example: "HTML knowledge")</title>
</head>
<body>

<h1>The First Heading (for example: "What is 'HTML'?"</h1>
<p>The first paragraph. (For example: "HTML is the standard markup language for creating web-pages.")</p>

</body>
</html>

Now, let's have the explanations here:

- <!DOCTYPE html> declaration defines this document to be an HTML5 document.
- <html> element is the root element of an HTML page.
- <head> element contains meta information about the document.
- <title> as you understand at once, is an element that specifies a title for the document.
- <body> element contains the visible page content.
- <h1> element defines a large heading.
- <p> element defines a paragraph (You may remember it easy using this mnemonics: "P, p, p for paragraph.")

MSL · « **Reply #3 on:** February 11, 2017, 02:20:08 AM »

What are the HTML Tags

HTML Tags. Do you know them? They're not so complicated. See, the HTML tags are element names surrounded by angle brackets (angle brackets are: < and >) like this:

Code: [Select]

<tagname>here is the concrete content</tagname>.

The HTML tags normally come in pairs like <b> and </b>, <p> and </p>, etc.
The 1-st tag in a pair is the start tag, the 2-nd tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name. (See the examples above.)
The start tag is also called "the opening tag", and the end tag -- "the closing tag".

SEO · « **Reply #4 on:** February 18, 2017, 02:08:48 AM »

If you worry that there are many HTMLs like HTML, HTML5, etc., don't worry at all! These are just different versions. Now you'll get it, when you see the HTML history:

HTML Versions

VERSIONS YEARS

HTML   1991
HTML 2.0   1995
HTML 3.2   1997
HTML 4.01   1999
XHTML   2000
HTML5   2014

MSL · « **Reply #5 on:** March 14, 2017, 01:14:13 PM »

HTML Puzzle Boxes

HTML puzzle boxes:

, i. e.

Code: [Select]

<html>
    <head>
        <title>
        </title>
        <style>
        </style>
    </head>
    <body>
        <p>
        </p>
    </body>
</html>

^{https://mozilla.github.io/mozilla-club-activity-html-puzzle-boxes/#en}
^{https://creativecommons.org/licenses/by-sa/4.0/}

kumkum · « **Reply #6 on:** December 14, 2017, 03:41:01 PM »

About HTML:

HTML is hypertext markup language which is used for creating web pages and web applications. HTML developed by Tim Berners-Lee in 1990. By using special text called hyperlinks, you can move from one page to another on the web.
You have to use HTML tags, which is surrounded by angle brackets. For example: <P> Content </p>

Here is the basic design to create an HTML page.
<html>
<head>
<title>Title</title>
</head>
<body>

<h1>First Heading</h1>
<p>first paragraph.</p>

</body>
</html>

Gay · « **Reply #7 on:** January 10, 2018, 04:25:07 PM »

I think <p>first paragraph.</p> is better to be <p>First paragraph.</p>

Gay · « **Reply #8 on:** January 10, 2018, 04:46:07 PM »

Simple HTML tables

It's really simple to create an HTML table. I'll show you how right now:

Simple table code sample

Code: [Select]

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <th>First name</th>
    <th>Last name</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Kim</td>
    <td>Lee</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jessica</td>
    <td>Liu</td>
    <td>39</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

</body>
</html>

To be continued.

Gay · « **Reply #9 on:** January 11, 2018, 03:32:02 AM »

Let me continue the HTML tables information.

Do you know which are the basic HTML tables elements now? They are <table>, <tr> and <td>. It means that in HTML, you may create tables using the <table> element, in conjunction with the <tr> and the <td> elements.

Each set of <tr>s (opening and closing tags) represents a row within the table that they're nested in and each set of <td>s represents a table data cell within the row that they're nested in.

You can also add the table headers (using the <th> element).

Let me show you another, simpler example:

Code: [Select]

<!DOCTYPE html>
<title>The Simpler Example</title>

<table>
    <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr>
        <td>Second Table cell</td>
        <td>Second Table cell</td>
        <td>Second Table cell</td>
    </tr>
</table>

Some of you may wonder is it a real table, if there are no borders. Yes, it is, but if you still need borders here are coming two easy suggestions:

I assume that in most cases, you will likely wish to add borders to all of the elements. The best is to define the border in an embedded or external style sheet. That way, you can apply the border to all table cells within a single declaration -- so, to do this, just place the border styles inside a <style> element, like this:

Code: [Select]

<style>
    table, th, td {
        border: 1px solid red;
    }
</style>

, and after adding those styles, your document might look something like this:

Code: [Select]

<!DOCTYPE html>
<html>
    <head>
        <title>Red Table Example</title>
        <style>
            table, th, td {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>1st Table cell</td>
                <td>1st Table cell</td>
                <td>1st Table cell</td>
            </tr>
            <tr>
                <td>2nd Table cell</td>
                <td>2nd Table cell</td>
                <td>2nd Table cell</td>
            </tr>
        </table>
    </body>
</html>

More:

1. Collapsing the border

If you had try that above probably you already noticed its "double border" look. You may keep this if you wish. In case you prefer to collapse the borders into one, solid border, you have to add the following to your style sheet:

Code: [Select]

table {
  border-collapse: collapse;
  }

Pretty simple, right?

2. Cell padding

You may specify how much padding you need; for instance, to apply padding of 15 pixels, add the following to your style sheet:

Code: [Select]

padding: 15px;Really simple, indeed.

3. Table width

Width can be specified in either pixels or percentages. Specifying the widths in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page (and how wide the browser is).

An example of using percentages:

Code: [Select]

table {
    width: 50%;
    }

Simple and clear.

4. Alternating background color

Also pretty easy stuff. An example:

Code: [Select]

table.alt tr:nth-child(even) {
    background-color: #aaa;
}
table.alt tr:nth-child(odd) {
    background-color: #ddd;
}

The class called 'alt' was applied to this alternating table's background color example, so if there's more than one table in the document, only tables with that class will have these styles applied to them.
If it's still not clear enough, let's see it in this way:

Code: [Select]

<!DOCTYPE html>
<html>
    <head>
        <title>Full Table Example</title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ccc;
                padding: 10px;
            }
            table.alt tr:nth-child(even) {
                background-color: #aaa;
            }
            table.alt tr:nth-child(odd) {
                background-color: #ddd;
            }            
        </style>
    </head>
    <body>
        <table class="alt">
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

I hope now it's clear.

To be continued.

MSL · « **Reply #10 on:** January 14, 2018, 06:11:18 AM »

HTML elements and tags tutorial

This topic is about:

As far as many people have no basic HTML knowledge or they've got a minimal HTML knowledge, I think it's good to explain more here about the mentioned already above tags (HTML tags)

The HTML elements and HTML tags

It's not difficult now to learn the essence of HTML -- the HTML elements. They give structure to the HTML documents and tell the browsers how you want your site (website) to be presented.
Generally the HTML elements consist of a start tag, some content, and an end tag.

The HTML tags

The HTML tags are the labels you use to mark up the beginning and the end of an element. All HTML tags have the same format: they begin with a less-than sign (<) and end with a greater-than sign (>). Just remember it simply: they begin with a < and end with a >.

Generally speaking, there are 2 kinds of HTML tags - opening tags like: <html>, <strong>, <u>, etc. and closing tags like: </html>, </strong>, </u>, etc. The only difference between an opening HTML tag and a closing one is that forward slash /. You label content by putting it between an opening tag and a closing tag for example if you want to underline some text you'll but it between <u> and </u> like this

Code: [Select]

<u>My underlined text.</u> and you'll get it like this: "My underlined text." (without quotes, of course).
To learn HTML is, mostly, to learn and use its different tags.

One more example

And here I'll show you one additional example. The HTML elements h1, h2, h3, h4, h5 and h6 are used to make headings ("h" stands for "heading"), where h1 is the first level (and normally the largest text), h2 is the second level (and normally slightly smaller text)... and h6 is the sixth and last in the hierarchy of headings (and normally the smallest text).

Code: [Select]

<h1>This is a heading.</h1> 

<h2>And this is a subheading.</h2>

Exception

Well, as they say, there is an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called 'empty elements' are not connected to a specific passage in the text, but rather are isolated labels. For example, a line break which looks like this: <br> (in XHTML, the <br> tag must be properly closed, like this: <br />).

Should the HTML tags be typed in uppercase or lowercase?

The correct way is to type tags in lowercase. However, most browsers might not care, if you type your tags in upper, lower or mixed cases. For instance <BODY>, <body> or <BoDy> will normally give the same result.
If you have some questions, let me/us know.

Gay · « **Reply #11 on:** January 15, 2018, 02:30:04 AM »

Let me finish the HTML tables information.

Maybe for you this will be one of the most interesting things: HTML tables can be broken into sections using the following elements:
- Table header (<thead>)
- Table body (<tbody>)
- Table footer (<tfoot>)

What does HTML <thead> tag do?

This element (<thead>) is used to identify one or more rows of a table that contains (contain) column labels rather than table data.

What does HTML <tbody> tag do?

This element (<tbody>) must be a direct descendant of a <table> element and is used to identify <tr> elements that comprise the body of the table. The element should always come after <thead> element and may come before (or after) a <tfoot> element.

What does HTML <tfoot> tag do?

The element <tfoot> identifies one (or more) <tr> elements as containing summary contents of an HTML table's columns. This element must be the direct descendant of a <table> element.

When you need to ask or discuss something more about the HTML tables, you are welcome to let's know.

Certvalue123 · « **Reply #12 on:** June 21, 2018, 12:45:32 PM »

hi. In the HTML Certificate documents your knowledge of HTML. The CSS Certificate documents your knowledge of advanced CSS. In the JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
SPANLINK removed. Used banned!!!

MSL · « **Reply #13 on:** June 21, 2018, 01:26:33 PM »

And in spam in the HTML knowledge thread -- your linkspam!

Thanks we have good ban policy here!

SEO · « **Reply #14 on:** June 21, 2018, 01:42:21 PM »

Spamlinks are not a part of the HTML knowledge. He/she/it spammed us again. Spamlink removed. He/she/it -- banned! Welcome to the big ban list of seo-forum-seo-luntan!!!

Omnilogy (Non-SEO and SEO) forum

☆ ☆ ☆ № ➊ Omnilogic Forum + More ☆ ☆ ☆

Your ad here just for $2 per day!

Your ads here ($2/day)!