Monday, May 13, 2013

How To Make Love [HTML] Online

Now, I know what you are thinking: "I learned HTML ages ago! Why are you wasting your time with it now?" Well, you are either thinking that or, "What the ---- is up with the title?" Either way, today we cover some basics of HTML. In some ways, the language is the most important one to know, because it is the one that clients actually see when viewing your site. That being said, even if you have the most sound and secure servers in the world, it helps to have a pretty site. A few days ago, we edited /srv/http/index.html and viewed http://localhost/ to see our changes. For today's purposes, we can do the very same thing to check out our HTML code. If you don't remember how we viewed our localhost, be sure you have set up your Apache server, and then start the daemon. In Arch, this can be done by:


# systemctl start httpd


In Ubuntu:


# service httpd start


Once done, visit http://localhost/. It should be ready to go. If you followed A Patchy Apache, it should read:


If you didn't, it should display some boring filesystem. If you want it to disply our fancy "Hello World!," just edit your /srv/http/index.html to read:

<html>
<title>Welcome</title>
<body>
<h2>Hello World!</h2>
</body>
</html>


We might as well start with this for out HTML introduction. As you might have noticed, the file starts with the <html> tag, letting the web server know which language to call. The next tag is the <title> tag. This will alter what clients read on their tab for the site. In our case, it reads "Welcome," but we could change it to read whatever we like. Like many other languages, the next logical step is the <body> tag, which is the bulk of the HTML code. The <h2> tag can be interpreted to mean "header 2" or "the header of the body." We could have used any header tag, ranging from h1 to h6, but h2 was chosen for this example. Finally, the file ends by closing each domain, wich is done by adding a "/" to the original tag. For example, <body> is closed by </body>. If you have never seen HTML code before, this might be a bit cumbersome, but trust me when I say that HTML is relatively easy to learn.

To show some variation to the language, you could imagine changing the "Hello World" example to read "Welcome to KeroCG.com!" in the title and "Today we are learning about HTML. Care to join us?" in the subtext by using the following alterations:


<html>
<title>KeroCG.com</title>
<body>
<h1>Welcome to KeroCG.com!</h1>
Today we are learning about HTML. Care to join us?
</body>
</html>


If you copy this to your /srv/http/index.html, your http://localhost/, should look like this:


Now on to some fun stuff. Let's say you want to add a link in your text. It goes something like this: <a href="link">text to click on</a>. For example, if you wanted to link KeroCG.com as the premier place to learn how to code, you would type in: <a href="kerocg.blogspot.com">The best place to learn to code</a>. This would create a link between the words "The best place to learn to code" and "kerocg.blogspot.com." If you wanted to color some text or change the font type, you can do that by adding the "font color=color" or adding "font face=font" to your tag. Note that the color chosen for your font can be a hexadecimal code. Also, italics, bold, and underline are <i>,<b>, and <u> respectively. <p> creates a new paragraph. So, let's change our code:


<html>
<title>KeroCG.com</title>
<body>
<h1>Welcome to KeroCG.com!</h1>
Today we are learning about HTML. Care to join us?
<p><i>italics</i>
<p><b>bold</b>
<p><u>underlined</u>
<p><font color = "blue">Blue</font>
<p><font face = "courier">Courier</font>
<p><a href="kerocg.blogspot.com">The best place to learn to code</a>
</body>
</html>



This will change your http://localhost/ to read:

And we are well on our way to working with some real html code. Imagine you wish to change the background, this can be done by adding the following tag of code: <background="backgroundimage"> for example, if you wanted to make this image (full credit to ringosdiamond from deviantart.com) your background, you would save it in your /srv/http/ directory and add the following line to your code: <background="Wallpaper____TARDIS_by_ringosdiamond.png"> after your body tag. You can manipulate this background by adding in a few variables, such as "bgcolor=color" or "bgproperties="fixed."" remember that your chosen color can be a hexadecimal code.

Now, we will probably come back to HTML later (after working a little with web.py), but for now, we will just work a little on tables and framesets. Firstly, tables. Tables in HTML use the <table> tag. They also use the <tr> and <td> for manipulating table rows and table data respectively. For example, if you wanted to create a simple table with 2 colums and 3 rows (along with the aforementioned background image), you could add the following lines to your code:


<html>
<title>KeroCG.com</title>
<body background="Wallpaper____TARDIS_by_ringosdiamond.png">
<h1>Welcome to KeroCG.com!</h1>
Today we are learning about HTML. Care to join us?
<p><i>italics</i>
<p><b>bold</b>
<p><u>underlined</u>
<p><font color = "blue">Blue</font>
<p><font face = "courier">Courier</font>
<p><a href="kerocg.blogspot.com">The best place to learn to code</a>
<p><table border="1">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
<tr>
<td>cell5</td>
<td>cell6</td>
</body>
</html>

Which provides:



Now, let's say you want to have two (or more) partitions to your site, to allow a navigation bar or something on the side with a host of links. This can be done by creating frames, which are like tables, except they take up the whole screen. We could split the screen directly down the middle and add content to both dies individually by adding this to our code:

<frameset cols="50%,50%">
  <frame>
  <frame>
</frameset>


You can manipulate the contents of the frames by linking in other sites. Be sure these sites are saved to the appropriate directory. To do this with http://localhost/, use the cp command to copy your current index to another file, say index2.html.


# cp index.html index2.html


And then save the following to index.html:


<frameset cols="50%,50%">
  <frame name="index" src="index2.html">
  <frame>
</frameset>


If you did so, you should see a site that looks like this:


But that's not quite aesthetically pleasing. Instead, let's create a sidebar, side.html:

<html>
<title>KeroCG.com</title>
<body bgcolor="333333">
<font color = "white">HTML</font>
</body>
</html>


And then change index.html to this:

<frameset cols="10%,90%">
  <frame name="index" src="index2.html">
  <frame>
</frameset>


Then your http://localhost/ will look like this:


And there you have it, a simple guide to HTML. We can come back to it later if there is enough support

As always, thanks for reading, and be sure to check out Ringosdiamond at deviantart.com,
-Leios

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)