Web Design - HTML Coding Tutorial - Using HTML Code
Web Design tutorial for HTML Code - Coding Tutorial
There are many out there who are overwhelmed by the prospect of creating their own website. Many believe that creating a website is extremely difficult: this web design tutorial will demonstrate that this is not true.
Although it is true that there are forms of web design that are very complex (and software can be quite expensive), HTML code is both understandable and useful!
Lets get started:
If you are using an HP open up the program called 'Notepad' and if you are using mac open up the program called 'Text Edit' (If you are using 'Text Edit' follow the link at the bottom of the page and follow the few simple steps to set your program for HTML - I promise it is quick and easy)
Next copy the section of HTML code below and save the file as Home.html
<Html>
<Head>
<title>Practice HTML</title>
</head>
<body>
<body bgcolor="blue">
<font color="white">
<h1><center>This is a practice HTML Page</center></h1>
<h2>Different functions that can be done with HTML are:</h2>
<marquee>the 'Marquee'</marquee>
</font>
<p><a href="https://hubpages.com/technology/Basic-Web-Design-Using-HTML">Links to other website or pages</a><p>
<font color="darkblue"> 'different color fonts'</font><p>
<font color="white"><font face="COMIC SANS MS"> 'different font styles'</font>
<p>Pictures <p><img src="http://www.arspublik.com/images/2009/11/stars-born-public-domain-p.jpg">
<p><font color="white"><center><h3>HTML Pages are a great way for the beginning web-designer to start.<p> Web Design software uses HTML and it is extremely helpful<p> in the long run to understand the basics of HTML.
</body>
</html>
This is an extremely simple (and tacky) web page, but the HTML code within contains most everything needed to understand basic web design.
The Goal: The goal is to teach you what the HTML that you pasted into your document means and how to use it so that you can create pages of your own.
So lets start the Explanation:
<>
Anything within these symbols <> is HTML code and anything outside is text that will show on the web page.
</>
You will see something like </HTML> throughout the page. The '/' instructs the software to end the code. (If you told it to bold a portion of text <b> but you didn't want the next word to be bold, you would put </b> just before that word.
<HTML> <Head>
These are two standard symbols that you will enter into the top of every web page you design (their function is something that you can study on your own).
<Title> </Title>
Whatever is written within these symbols will be the title of your web page. This will show up in the top bar of your web browser.
<body> </body>
This is the true meat of your web page. Everything else was preliminary, but what is in-between these symbols is the core of your page.
<body bgcolor="blue">
This sets the background color to blue. You can change what is in the quotes to change the color (lightblue, black, #0000FF - you can find different color codes by typing "HTML Color codes" in any search engine)
<Font color="white">
This changes your font color. You can also change what is in these quotes to change the color.
<h1>
This stands for header. It changes the size of the text. h1 through h7 are different size texts (largest to smallest)
<center> </center>
Whatever is written within these symbols will be centered on the page
<marquee> </marquee>
Whatever appears within these symbols will scroll across the screen. If you search 'HTML Marquee codes' you will see that there are many different ways to have your text, image or link scroll.
<a href=""> </a>
This is code for a link. Whatever URL (or location on your PC) that you put in the quotations will be the location that the link will lead to. Whatever is in-between these symbols will be what appears as the link title.
<font face="COMIC SANS MS">
Font face changes your font style. There are many lists of acceptable font faces online.
<img src="">
This is the code needed to place an image on your website. The simplest way is to put a direct URL link to a picture that you like online within the quotes. If your picture is on your computer you can enter in the location of the picture (/Users/apstumbo/pictures/dad.jpg - this will show the picture titled 'dad' in my 'pictures' folder).
<p>
P is for paragraph. This skips a line on your web page. You can put as many consecutive <p><p>'s as you like to space different texts or pictures.
There are also some codes that I didn't use, but are very helpful. Some of these are:
<i></i> - italics
<b></b> - bold
<u></u> - underline
Now you have all of the necessary tools to create a web page! There are many different types of software that enhance the designing experience, but it is important to start with simple HTML coding.
