ajnl Posted July 31, 2012 Posted July 31, 2012 (edited) Introduction This is a tutorial started by =F|A= MoAZeR, I asked permission from him if I could continue the series. This will mainly add somethings I think you need when starting to learn html and add some new information. Hence the "Part 1.5", if people like this, then we can continue to make more. ========================= Website Coding languages What is html? Html stands for Hypertext Markup Language and is used in making websites. Before html was used to change fonts, color, etc (all the styles of your website), but now CSS is used for the styling part. For now we will not go into CSS, in later tutorials we will definitely have CSS, since CSS is now considered the standard for styling your website. What other languages are used when making a website? Like I said before, CSS is used for styling. PHP is another language used, which is used to build forums, "contact us" pages, databases, etc. It is also possible to incorporate javascript to make your website interactive. Javascript is usually embedded into HTML pages, it is lightweight programming language and scripting language. What exactly is CSS? CSS stands for Cascading Style Sheets, it defines how to display HTML elements. They are saved in CSS files and they can save a lot work when building websites. ========================= Coding Programs When coding a website, it is possible to use notepad, but there are some better coding programs. I use sublime text, which in my opinion is the best one you can get. It does cost money, but it includes a trial version. Bluefish is another very good coding programming, it used to only be for Linux but there is a windows and mac version now. ========================= Start Coding! Now that you know a bit about HTML, you can start up your coding program and start coding. I will show the basic lay up for a website and explain each section. Below is the basic website build up, the FA website is also built up the same way: <!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html> DOCTYPE declaration The DOCTYPE declaration (first line) has to be there and will always be the first thing you see. HTML 5 <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transtional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> It is also possible to use xhtml. Xhtml is like html, only this "markup must also be written as well-formed XLM". (From w3schools website)If you would like to understand more about the differences, check out this website. I will not list the doctypes for xhtml, for any html tutorial I post, I will use HTML 5. The head tags The head tags is not shown on the website. It includes the title tags, meta tags, link tags, and scripting tags. Title tags: This is the title of your website, which is shown on the top of the internet browser (like in the tab area) Meta tags: Meta tags are used to give a description of the website using a few keywords. This is used for search engines like google. So that people can find your website using keywords. Meta tags are not necessary to have. Link tags: These are used later to link your CSS code (which is saved in a different file). Link tags can also link javascript files. The link tag also makes the favicon.ico appear on your website. The favicon.ico image shows up next to your title. Body tags In between the opening and closing body tags is where you put all the code to build your website. Example code: <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World</h1> <p>This is a tutorial named, "First Steps Into HTML Part 1.5"!</p> </body> </html> The <h1>, is a header tag. You can have <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Use the header tags for titles of sections of the website. That way google can easily see the structure of your website. The <p> is a paragraph tag. Just copy past it into your code editor. Then save it as helloworld.html (in any folder you want). Once saved, go to that folder and open it with any web browser you want. I like to have my code editor and browser opened at the same time. That way when I make a change to the code, I can save, click on the web browser reload and see the change instantly. ========================= This next bit of code will show you how to make a table using html and demonstrate the different header tags. <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>This is a h1 tag</h1> <h2>This is a h2 tag</h2> <h3>This is a h3 tag</h3> <h4>This is a h4 tag</h4> <h5>This is a h5 tag</h5> <h6>This is a h6 tag</h6> <p>This next part is a Table!</p> <table border="1"> <th>First Column</th> <th>Second Column</th> <tr> <td>Item 1</td> <td>Item 2</td> </tr> <tr> <td>Item 3</td> <td>Item 4</td> </tr> </table> </body> </html> <th> is a table header, you can make one for each column if you want. The <th> is not necessary. <tr> creates a row and within the <tr> tags you put the <td> tag which represents the column. With in the <td> is where the text is put or pictures or whatever you want. ========================= Quick Recap Always start a html page with the DOCTYPE declaration Showed how to set up a basic html page Showed how to make a simple table Reminders Always close the tags. for example: <table></table> Close tags in the order that they were opened. for example: <body> <table><tr><td></td></tr></table></body> All code/tags should be in lowercase, except for the DOCTYPE. When coding, try to make it neat and logical. Any coder should be able to look at it and see what is going on. I like to tab in for every opening tag. You can see this in the images I posted above. Edited March 30, 2018 by Fearless Staff Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.