HTML FUNDAMENTALS

HTML document is web page

  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages
  • The task of the browser (Chrome, Internet Explorer, Firefox) is to read HTML and show it as a Web page.
  • The browser does not display the HTML tag, but uses them to interpret page content.

Why DO you need to know HTML?

  • Site structure
  • No HTML is no structure
  • No structure - no website

Flow

This is the display order of elements on the page.

Layer arranged at the top of the code is displayed before the layer which is located in the code below. This logic makes it easy to predict the result of the output elements and manage them.

Block elements

  • The blocks are arranged vertically one above the other
  • Such elements have width, height and margins
  • Block tags occupy the entire width, for example if you ask them the background, the background occupies the entire width of the parent element.
  • As the block tag occupy the entire width of the parent element, the objects inside the block tag can be controlled by the horizontal alignment: left, right, center, justify

BLOCK ELEMENTS

  • Within the block tag can be placed other block
  • <p> does not allow to insert themselves into the block elements
  • Block elements on the properties are not intended for the line elements, such as a vertical-align.

Inline elements

  • Within the line items allowed to insert text or other inline elements.
  • In the line element is forbidden to insert block elements
  • Height property does not apply
  • Equal to the width of the content (if any padding and boarders - they are added to the width)

Inline elements

  • Elements are arranged one behind the other in a single line, the line is transferred, if necessary,
  • On inline elements are the properties of vertical-align.

Inline-block

  • Within the inline-block elements is permissible to place text or block elements.
  • Height of the element is calculated automatically by the browser, based on the contents of the block.
  • Equal to the width of the content plus the padding, margins and borders.

Inline-block

  • Consecutive multiple items on the same line and are transferred to another line if necessary.
  • Can be aligned vertically with the property vertical-align.
  •  Allowed to set the width and height.

Named Character References

  1. Ususally called  enitities
  2. Used to print characters that have a special meaning in  HTML

There are  many more entities , but these four are the most important because they represent characters that have a special meaning in HTML.

HTML interprets the less-than, greater-than, ampersand and quote symbols as tag delimiters.

> <!-- denotes the greater than sign (>) -->
< <!-- denotes the less than sign (<) -->
& <!-- denotes the ampersand (&) -->
" <!-- denotes double quote (") -->

enitities

Why Lowercase Tags?

  • You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive. 
  • <B> means the same as <b>.
  • The World Wide Web Consortium (W3C), the group responsible for 
  • Developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML 

.htm or .html

  • When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. 
  • It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser. 
  • Use .html extension

Table

Basic Table

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<table border="1">
  <tr>
    <td>Table cell 1</td>
    <td>Table cell 2</td>
  </tr>
</table>
  
</body>
</html>

In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.

Table Headers

Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.

Colspan

You can use the colspan attribute to make a cell span multiple columns.

Rowspan

Similar to what colspan is for columns, rowspan enables you to make a cell span multiple rows.

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:

  • <thead> - to create a separate table header.
  • <tbody> - to indicate the main body of the table.
  • <tfoot> - to create a separate table footer.

Full table example

Iframes

An iframe is used to display a web page within a web page.

Syntax

<iframe src="URL"></iframe>

The src attribute specifies the URL (web address) of the iframe page.

Set Height and Width

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Use iframe as a Target for a Link

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

IFrame example

Table layout

  • A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
  • Now a days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags.
  • This part will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.

3 columns

3 Rows 2 Columns

Why Tables Are Bad (For Layout)

  • Tables are usually more bytes of markup.
  • Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
  • Tables break text copying on some browsers.
  • Once you know CSS, table-based layouts usually take more time to implement.
  • Tables are semantically incorrect markup for layout. (They describe the presentation, not the content.)
  • Tables make life hell for those using screen readers.
  • Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.

WHAT WE'VE LEARNT

  • What is HTML Document
  • Why do we need to know HTML?
  • Flow
  • Block elements
  • Inline elements
  • Inline-block elements
  • Enitities
  • Tables
  • Iframes
  • Table layout

CLASS WORK

Create the following page using table layout

When you click "Menu 1"

Menu 1

Page with additional info is shown

When you click "Page 2"

Page 2

Page with info about page 2 is shown

When you click "Page 1"

Page 1

Page with info about page 1 is shown

HOME WORK

  • Creat a site about any topic using table layout
  • There are should be at least 3 top menus
  • There are should be at least 2 side menu items in every top menu page
  • All the pages of top menu should be placed in their own folders
  • Add to the footer entity of copyright symbol and then write your name: © You

THANKS FOR YOUR ATTENTION

HTML Fundamentals

HTML Fundamentals

By Dima Pikulin

Made with Slides.com

HTML Fundamentals

  • 1,064

More from Dima Pikulin