Make A Complete Website From Scratch – Part 1: HTML

davisde
[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=6Ct6emxVR9w” browser_url=”https://www.youtube.com/watch?v=6Ct6emxVR9w”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-7794″][vc_column_text]

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.


In Part 1 of this series, we will take a look at HTML basics.

Here’s a list of the other tutorials in the series:

[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-7794″][vc_button title=”Download Code Sample” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/304_html/304_html.zip”][vc_column_text]

HTML Basics

HTML stands for Hyper Text Markup Language and provides the backbone structure for webpages. Not to be confused with a programming language, HTML is a markup language that was designed to link documents and media together in an interactive way.

HTML is standardized through W3C and the latest version is HTML 4.01 (see http://www.w3.org/TR/html401/).

HTML is evolving constantly and presently there are 2 important variations eg XHTML and HTML5.

XHTML (eXtensibleHTML) is a derivation of HTML and XML. HTML5 is the fifth revision of the HTML standard. (see http://en.wikipedia.org/wiki/HTML5.)

HTML/XHTML/HTML5 have different Doctype Definitions (DTD’s) to be identified by browsers. For standards compliant HTML a web page needs a valid DTD (at the top of the html page).
HTML 4.01 strict DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

For information on valid DTD’s, see http://www.w3.org/QA/2002/04/valid-dtd-list.html.

HTML Editors

There is a large selection of software available on the market (free and paid) directed towards website creation. A majority of website creation software is called What You See Is What You Get or WYSIWYG. A good example of commercial software is Adobe’s Dreamweaver, while a good example of open source software is Mozilla’s Kompozer software. Despite the availability of web design software, it is not required to create a website. A website can be created using a basic text editor and a web browser for previewing.

HTML Structure

HTML utilizes an element tagging structure. This means that every element of the code is tagged so that the web browser knows how to translate it. With a few exceptions, each tag generally comes in pairs: and opening tag and a closing tag. In between each tag is the content that is being tagged. Certain tags can also contain attributes, which enhances the properties of the tagged content.

Tags

For a list of commonly used tags, visit the tags page. An HTML tag is used by browsers to help classify and organize different elements within a web page. Tags are characterized by being surrounded by an opening and closing angle bracket (example: <tag>). An opening tag (example: <tag> signifies the begenning of an element’s section and a closing tag (example: </tag> is signifies the end of an element’s section. Here’s an example of a how a paragraph element tag would be used:


<p>Welcome to my webpage</p>

For some tags, the element does not need to surround or encompass any content. In those cases, it is not necessary to have both an opening and closing tag. Instead, a shorthand is available to close out the tag. It consists only of a forward slash and a closing angle bracket. An example of it’s usage can be seen in image element tag:

<img src=”my_image.jpg” />
Tags can be contained within other tags in a method called “nesting”. Nesting is required by some tags (such as lists), while with other tags it just combines itself onto the content it surrounds. When it comes to structure, the “indention” method is generally preferred to show nesting tags. This is when you list one set of tags, and then you indent each nesting set of tags within it. A good example is with lists

<ul>

<li>List Item</li>

</ul>
Tags that don’t have closings
Tags can be nested

Text Formatting

HTML text formatting generally takes place in the body of the HTML code. It includes text structure, such as paragraphs, lists, font color, bold, italicizing, and underlining. The table lists a few of the commonly used text formatting tags, but you can find a more extensive list here

Formatting Tag Formatting Name Description Example Output
<p> Paragraph Designates the beginning and ending of a paragraph <p>This is my paragraph</p> This is my paragraph
<b> Bold Makes the tagged font bold. <b>This is my paragraph</b> This is my paragraph
<i> Italics Italicizes the tagged font. <i>This is my paragraph</i> This is my paragraph
<u> Underline Underlines the tagged font. <u>This is my paragraph</u> This is my paragraph
<ul> Unorganized List Creates a bulleted list. MUST be coupled with the <li> tag <ul>

<li>List item 1</li>
<li>List item 2</li>

</ul>

  • List item 1
  • List item 2
<ol> Organized List Creates a numbered list. MUST be coupled with the <li> tag <ol>

<li>List item 1</li>
<li>List item 2</li>

</ol>

  1. List item 1
  2. List item 2
<li> Organized List Creates a numbered list. MUST be coupled with either the <ul> or <ol> tags <ol>

<li>List item 1</li>
<li>List item 2</li>

</ol>

  1. List item 1
  2. List item 2

Attributes

For a list of commonly used attributes, visit the attributes page. HTML attributes are found inside of tags and help to enhance the properties of the tagged element. Attributes follow the format of “attribute name” followed by a “=” and then the attribute value surrounded by quotes. Here’s an example

<body bgcolor = “blue”>
Not all tags allow for attributes, and not all attributes are compatible with all tags. The type of attribute available for a tag depends on what type of tag it is. For example, an image tag allows for source, width, height, and alt tags, all of which help format and enhance the picture

<img src=”picture.jpb” width=”150″ height=”50″ alt=”My Picture”/>
Because those attributes are specific to an image, none of them will work with a link tag. Instead, a link tag has it’s own set of attributes: hyperlink reference, target, and name

<a href=”mypage.html” target=”_blank” type=”mypage”>Go to My Page </a>
 

Tables

For table attributes (bgcolor, images, rowspan, colspan), visit the table page. There are many ways to organize the layout of a webpage using different scripting techniques, but the best way to do it using solely HTML is through the use of tables. While they are very useful, tables can be exceedingly difficult to use depending on how complicated your layout is. A tables structure has to follow certain tagging guidelines in order for it to work properly. These guidelines are as follows:

  1. Each table begins and ends with the <table></table> tags.
    1. Before the table will work, you must have at least one row and one column.
  2. Nested between the table tags are the row tags <tr></tr>.
    1. You must have at least one row in each table in order for it to function properly.
    2. Each row must have at least one column nested within it.
  3. Nested between the row tags are data cell tags <td></td>.
    1. You must have at least one data cell in each row.
    2. You must have the same ammount of cells in each row (unless using colspan or rowspan attributes)
    3. Although these are commonly know as “column” tags, they represent cells. A cell can exist without a column, but a column cannot exist without a cell.

Here is an example of a two cell, two row table:

<table>

<tr>

<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>

<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>

</table>


[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-7794″][vc_column_text] Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter [/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

37 Comments

  1. jackdurrant
    jackdurrant
    January 14, 2012 at 11:49 am

    I still can’t see why someone would use Adobe DreamWeaver. There are probably some Macs that you can buy for cheaper than the price of DreamWeaver…

    • Austin Archer
      Austin Archer
      January 17, 2012 at 10:31 pm

      torrenting it cost me $0 and 0 cents. I got the ENTIRE creative suite 5.5 MASTER COLLECTION FULLY ACTIVATED for free. I use Photoshop,After Effects, Dreamweaver, Flash, an on occasion, Fireworks, on a daily basis. The rest are just perks that I got for no cost.

      • Asd20752
        Asd20752
        January 24, 2012 at 2:32 pm

        But that isn’t legal.

  2. Rumbis
    January 14, 2012 at 1:11 pm

    here go your link “Oops, it looks like this page does not exist. If you are lost try using the search box below.”

  3. ragnarrok123
    ragnarrok123
    January 15, 2012 at 8:05 pm

    Realy good video :D!!!!

    Waiting for the other videoes :D!!!

  4. staybrutalmatt
    staybrutalmatt
    January 16, 2012 at 4:00 am

    Hey man! Thanks so much for all of you tutorials. If it wasn’t for stumbling upon your videos years back, I would never be where I am today. (knowledge wise).
    You’re the reason I got so into computers and technology. As a sophomore in Highschool, I know basic and complex HTML, XHTML, and CSS, as well as starting JavaScript and jQuery.
    Thank you so much for all of your help, forever a viewer.

    • Austin Archer
      Austin Archer
      January 17, 2012 at 10:34 pm

      haha. Hey I’m a sophmore too. I go to WRHS in California. Anyway, this guy is awsome right!?!?!

  5. nmchlngy4
    nmchlngy4
    January 16, 2012 at 5:15 pm

    Please make Make A Complete Website From Scratch – Part 2: CSS.

  6. Rumbis
    January 16, 2012 at 9:57 pm

    One Golden Episode ! 🙂

  7. Austin Archer
    Austin Archer
    January 17, 2012 at 10:34 pm

    This is awesome. I learn many coding tips and tricks from you. BTW if you could do C++ coding, that would be awesome. I downloaded windows 8 because of you. It is m primary operating system and I love it. The problem is, G++ compiler doesn’t work for some reason. That’s why I have Ubuntu and Windows 7. Thanks again Gigafide. You ROCK!!!

  8. Joseph
    January 19, 2012 at 4:44 pm

    AWESOME VIDEO. Cant wait till the CSS tutorial comes out

  9. Joseph W
    Joseph W
    January 19, 2012 at 4:59 pm

    great video !

  10. JWP
    January 21, 2012 at 9:10 pm

    Why use Java when there’s PHP? I don’t consider this comment TOO opinionated 😛

  11. bill
    January 23, 2012 at 2:41 pm

    Thank you but is really hard.

  12. locoalisa
    locoalisa
    January 26, 2012 at 5:57 pm

    Good video helps a lot but when we can see more in is not enaugh for making website ??? It’s like a drop in the sea….:(

  13. ZAIN_MOR
    January 31, 2012 at 3:32 pm

    Thank you very much for all your tutorials ..keep the good work !!

  14. Adam
    February 16, 2012 at 4:56 am

    Looking forward to learning more from your tutorials, Keep up the good work.!

  15. SPYROS
    February 26, 2012 at 11:39 pm

    BETTER DO WITH DREAMWEAVER COZ IS BETTER TO FIND YOUR BUGS AND HELPS TO SEE UNDERSTOOD WHAT YOU HAVE DO ONLY SEE THE CODER ONLY

  16. Alec
    February 28, 2012 at 9:56 am

    thanks. so glad I found your website.

  17. Shinjan
    March 13, 2012 at 2:20 am

    ther’s loads of sites on the web with web designing tutorials but gigafide’s presentation is awesomeness!! animation’s simple yet superb!
    p.s. i’ve been into web design for a few months now, bt cant find a way to integrate audio within sites that runs on different versions of all browsers. Any help would be really appreciated. Thanks!!
    Lookin forward to more awesome tutorials!

  18. James
    March 13, 2012 at 2:44 pm

    Even though I know the basics and have used them, this first video is great. This video can always be used for reviewing purposes. Nice job

  19. alex
    April 4, 2012 at 11:57 pm

    hey can anyone just give me the html instead of me writing it down because I made a lot of mistakes….please

  20. orestesdd
    orestesdd
    May 4, 2012 at 7:30 pm

    I am trying to follow your tutorial to the letter. Could you let me know where I can get “*.jpg” files you are using in this series? Thanks.

  21. terciopela
    May 6, 2012 at 7:01 am

    hi, i ask please if you know, any web or prgram to make cartoon animation software free or with 3d dimention samething like moder and funy. beacause i be live i can do samething artistic and working with the pc and get same idea about video.
    and do draw with and download and my pc. thank your web it’s very useful and educational.Replay please Terciopela

  22. adamwxon
    adamwxon
    June 29, 2012 at 4:58 pm

    “No, now put that away!” This is why I love Tinkernut. You get knowledge, and entertainment. 😀 Great video.

  23. liciors
    July 5, 2012 at 2:59 am

    I learned HTML from your “Making a website from scratch” video on Youtube. Ever since then, my knowledge of computer’s has grown substantially, and will continue growing in grades 11 and 12 (I’m in grade 9, and learned HTML from Tinkernut the summer of 2009/summer of my grade 8 year) I thank you so much for this series, it will make the computer coding course super easy.

  24. dot
    September 1, 2012 at 3:21 pm

    can anyone help me , in the script My Data , mine dont work 🙁
    it still on left side :(…. i use notepad ++ v6..1.6 (UNICODE) that i just download and win 7 ultimate. pls..

  25. a.bester
    a.bester
    January 16, 2013 at 4:14 pm

    This is great set of tutorials thank you.
    Here are some good solid mac alternatives to the text editor that are also free. you can use wine to install textpad++ on a Mac or Linux computer. I find that fraise works well on a Mac. It has many of the features that textpad++ has. It does color change text, similar to textpad++ , for HTML, CSS, and java script and more. Here is the fraise download site: http://www.macupdate.com/app/mac/33751/fraise
    wine: http://www.winehq.org/

  26. Matthew
    February 10, 2013 at 8:01 pm

    Just a quick one I clicked in your : http://www.tinkernut.com/wiki/pages/Episode_304 link and it came up with an error. Please change the /pages/ to /page/ as per your actual link address.

    Thanks for the tutorial helped me out a lot.

    Matthew

  27. 0lance
    February 14, 2013 at 9:44 pm

    please i would like to know which one of these is good for a blogging site word press or html ?

Leave a Reply