11/10/2016

HTML Basics

HTML is the abbreviation  of Hyper Text Markup Language.It is the basic language for Web Design.If you want to design a web site as a professional or amateur ,you have to learn this codes.Never mind,learning Html is not hard and it is also funny.In this section ,we will learn this language by examples.


HTML is the skeleton of a web page.You write codes and the users see the web page,not the codes .Any page that uses Html can be examined by clicking right and selecting "View Source" on the page.





We will do examples and create web pages with HTML5.

Here is the first example of a simple web page:



<!DOCTYPE html> 
<html>
<head>
     <title>Title of the Page </title>
</head>
<body>
I am writing here
</body>
</html>

Let's explain the Html Elements used in this example.
First tag <!DOCTYPE html> is used for saying to the browser that we are creating our web page by Html5.
<html> is the root tag of the page.<head> tag may contain <meta> tags that define keywords,descriptions etc... ,javascript codes ,and <title> tag (the title of the page is on the top right of browser window).You write text ,create links,put image etc... in the <body> tag.



As you see ,we use "/" for closing some tags and the tags have a hierarchical  structure.

Creating An HTML File

There are good editors for creating a web page,site.Adobe Dreamweaver ,Notepad++ are the most populist programs for users.But in the beginning ,I advise you to use a simple text editor as Notepad.
Let's explain creating a file with Notepad  step by step:
  1. Open Notepad on your system.
  2. Write the codes (first example ) .
  3. File>Save as
  4. Type a file name as "first_example.html"
  5. Select "All Files (*.*) " in the Save as type section.
  6. Select "UTF-8" in the Encoding section.
  7. Then click Save
  8. Open the HTML file in your browser and view the result.

HTML Elements And Attributes

A Html element is the basic unit  of web page.Html elements usually have a start tag and an end tag.
For example a for heading we use like this: <h1> ....</h1>.
There are so many elements used for heading,text,images,links,paragraphs,forms,tables,frames etc... and also for animation with Html5.
<a>,<body>,<h3>,<table>,<input>,<img>,<iframe> are  examples of  Html elements.
Html elements are located in a nested  and hierarchical position.
Some Html elements like <br> has no content and a tag.(For a line break we use <br>)

Html elements are  not case sensitive but using lowercase is advised.

Html attributes are used for giving extra information  about  elements.The attributes are like parameters.All elements can be used with attributes.For example, an <img> tag has an attribute called src which is the source address and name of the image file:<img src="imgs/rain.jpeg">
You can also use size attribute with the image tag.:<img src="imgs/rain.jpeg" width="500" height="400">

src,href,width,height,lang,alt,background,bgcolor are examples....

HTML5.1
Html5.1 is the newest and improved version of the language.It is annıounced in 2016,there are old versions of Html as:HTML(1991),HTML 2.0(1995),HTML 3.2(1997,),HTML 4.01(1999),XHTML(2000),HTML5 (2014)...

Some Html4 elements are not being used in Html5.<font>,<frame> elements are known of them...

There are also new elements and attributes ;
<header>,<footer>,<svg>,<canvas>,<audio>,<article>... and number,date,time,calendar...