Since you are here,then I presume you have no idea on how to make a "HTML" website,worst case is you don't even know what is a "HTML". Correct? Well no worries, you actually came to the right place, and you're lucky for stumbling upon this blog. Here, we will give you lessons and guides on how to make a HTML website from scratch. We are very concise and we will give you detailed informations. From a plain old blank page to website intended to deliver your purpose. Yeah you must be really excited right now. Hold your horses we've got a lot to learn and we don't want to waste more time now do we?
First and foremost, you need to understand what is HTML means. HTML remarks a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Now you understand it, let's do some coding.
Next, you need to use notepad. Open notepad and try use simple coding. Type
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
First and foremost, you need to understand what is HTML means. HTML remarks a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Now you understand it, let's do some coding.
Next, you need to use notepad. Open notepad and try use simple coding. Type
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Before save it, try save as "<yourfilename>.html". Then try open it by using your browser. You'll see something like this.
Now your done basic HTML! But what is <p>? What is <h>? <p> remarks your starting your paragraph while <h> remarks your header starts. If you put<h1> it remarks your first heading. Also, "/" remarks end of something you use.
Let's try put some links so people who visit your website can direct to other pages. In order to do that,
<a href="https://www.w3schools.com">This is a link</a>
Let's learn about metadata. Metadata shows information about the data. The tag shows metadata the HTML document. However this will visible on the page.
There's term that named Block Level Elements which defines the function of metadata tag. Some of the basic of elements are
- <h> defines heading
- <p> defines paragraph
- <align> defines alignment
- <abbr> defines abbrevation
- <dfn> defines defintion
- <adress> defines contact information for owner.
- <blockquote> defines long quotation
- <ol> defines ordered list
- <ul> defines unordered list
- <li> defines list items.
- <dl> defines definition list
- <dt> defines an item in a definition list
- <dd> defines a description of an item in a definition list
For headings, there are various number of heading can be done. <h1> represents heading one and others. There also changeable alignment which left are default and also can be right, center.
Next would be,the technique of listing objects in HTML language.There are two ways of listing objects in HTML language.
1)Ordered (Numbered) List
a list in which the sequence of the objects of the elements matter
2)Unordered (Bulleted) List
list in which the sequence of the objects of the elements doesn't matter
OL:Ordered (Numbered) List
When listing objects in Ordered List,it would list the objects in a vertical manner with numbered sequence starting from 1 to the end of your list depending on the number of entries.
Here is an example of a structure of the ordered list.
OL Element –
<OL>
<LI>element 1….
<LI>element 2… .
<LI>element 3. . . .
</OL>
The output of the sample is:
1. List Item One
2. List Item Two
3. List Item Three
UL: Unordered (Bulleted) Lists
Unordered list is pretty much the same as Ordered List,the only difference is the way it is listed is with a bulleting at the beginning every element.
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>
The sample output is as follows:
• List Item One
• List Item Two
• List Item Three
The following example shows the html coding for object listing.
Example:
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
The coding above list the objects as in the image below:
Embedding Images
Next lesson is inserting images.This step can be executed by writing in this template
<img src=“File name.format” alt=“My Cat” width=“w” height=“h”>
File name.format=this spot can be inserted with photos of any format
Attributes of image embedding
src-A HTML page displays an image via src (source) which contains the path the image file.
alt-it specifies a descriptive text when the image cannot be displayed or cannot be seen by by the user.
the common causes might be:
1)they are visually impaired
2)deliberately changing the path inside your src attribute to makes it incorrect.
Table
Now, let's go to how to create a table. There are element attributes for a table.
1)Align -gives the horizontal alignment of the table as a whole.
2)Border- specifies the width in pixels of the border around the table.
3)Cellspacing- gives the space in pixels between adjacent cells.
4)Cellpadding -determines empty space in pixels, between the cell's border and the table element.
5)Width -specifies the width of the table. (<TABLEWIDTH=250>)
6)BGCOLOR specifies the background color of the table.
7)Background -gives an image file that will be tiled as the background.
8)Rules -specifies the dividing lines.
9)Frame -specifies which outer borders are drawn.
10)The table caption- gives flexibiliy to the border of the table.
11)Table row (TR) -used to define each row in the table.
Next lesson is inserting images.This step can be executed by writing in this template
<img src=“File name.format” alt=“My Cat” width=“w” height=“h”>
File name.format=this spot can be inserted with photos of any format
Attributes of image embedding
src-A HTML page displays an image via src (source) which contains the path the image file.
alt-it specifies a descriptive text when the image cannot be displayed or cannot be seen by by the user.
the common causes might be:
1)they are visually impaired
2)deliberately changing the path inside your src attribute to makes it incorrect.
Table
Now, let's go to how to create a table. There are element attributes for a table.
1)Align -gives the horizontal alignment of the table as a whole.
2)Border- specifies the width in pixels of the border around the table.
3)Cellspacing- gives the space in pixels between adjacent cells.
4)Cellpadding -determines empty space in pixels, between the cell's border and the table element.
5)Width -specifies the width of the table. (<TABLEWIDTH=250>)
6)BGCOLOR specifies the background color of the table.
7)Background -gives an image file that will be tiled as the background.
8)Rules -specifies the dividing lines.
9)Frame -specifies which outer borders are drawn.
10)The table caption- gives flexibiliy to the border of the table.
11)Table row (TR) -used to define each row in the table.
No comments:
Post a Comment