Rants, How to make money online, Google adsense, Google Maps, Helpful Hits, Helpful Links, Travel Links, WebMasters Masters Links, Blogging Tips, Hosting Help, HTML Help, Sports Blogs.

Creating A Personal Video Web Site in 30 Minutes Using HTML

Posted on 28th December 2007

Creating Your Very First HTML Document Part 1

"Design your personal video web site in 30 minutes with my 3 part free tutorial"


Part 1 | Part 2 | Part 3

For anyone new to writing a html document I recommend starting with notepad and move on to a more to Dreamweaver or another HTML editor once you have learn the basic command.

*Do not use programs like word or publisher for the designing of any html page.

* Leave the copy and paste until you learned that basic tags. Getting use to typing will make it easier to edit your html pages in the future.

First step, open notepad and type the following:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
Welcome to my first HTML web page
</body>
</html>



Excellent your have now created your first HTML document. Now for saving. Click file and save as. Lets called this file index.html

* HTML (Hyper Text Mark-up Language)

  • The first tag that every HTML document. must contain

* TITLE (The name giving to the page which will be displayed at the top of your browser

  • What appears in the top of your embroider when you are viewing you site

* BODY (The content is your web site)

  • The content of your web site


Ok, so why the arrows and forward slashes ( < > / ) These are called tags. Here is of basic html tags that might help you develop a presentable web page.

<h1>Heading 1 </h1>

Heading 1
<h2>Heading 2 </h2>

Heading 2

<h3>Heading 3 </h3>

Heading 3
<h4>Heading 4 </h4>

Heading 4

<h5>Heading 5 </h5>
Heading 5
<h6>Heading 6 </h6>
Heading 6

 

Lets put the heading tag into use when building your first web page / blog. So move o back o your html editor or notepad and just after your body tag type :

<h1>Welcome to first html web page </h1>

Save your html document., open your web browser and view. I prefer to use Firefox but testing your web page if different browser is very important.

To see an example of how your document looks click here

Just like your were using Word for example you would type a paragraph.

<p>The basics on how to design a web page</p>

* Remember always include the forward slash when closing HTML tags </a>

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to first html web page </h1>
<p>The basics on how to design a web page</p>
</body>
</html>

Lets add some colour and alignment to your header in your web page:

Here are a list of the basic colour and the code to implement them on your web site

Basic HEX and RGB Colors

  Color Color HEX Color RGB
  Red #FF0000 rgb(255,0,0)
  Blue #0000FF rgb(0,0,255)
  Black #000000 rgb(0,0,0)
  White #FFFFFF rgb(255,255,255)
  Green #00FF00 rgb(0,255,0)
  Yellow #FFFF00 rgb(255,255,0)

HTML Text Alignment

<align="center">

Center
<align="left"> Left
<align="right">
Right

 

Now your going to change to look of your heading.

Change <h1>The is the first HTML Web Page </h1> to:

<h1 align ="center">Welcome To My First <font color="#FF0000">HTML</font><font color="#0000FF">Web Page</font></h1>

To see an example of how your document looks click here

I am going to use the text the basic's on how to design a web page numerous other phases through my examples. You may use your own content and by the time you have finished this tutorial you will able to edit the page your requirements and have have it uploaded to the web.

Font Colors & Sizes

<b> The text is bold
<i> This text is italic
<u> The text is underlined
<font size="+1"> The is font size 1
<font size="+2"> The is font size 2
<font size="+3"> The is font size 3

With what you has learned so far you should be able to add a paragraph to you web page that look like this. Just incase there are problem I have placed the HTML code below.

My AIM as a Web Page Designer

<p align="left"><font size="+2">My </font>A</font>I<font size="+1" color="#0000FF">M</font> as a <i><font color="#FF0000">Web </font></i><b> Page</b> Designer</font> </p>

To see an example of how your document looks click here

Now we have a basic HTML web page that consists of a title, a heading and two paragraphs. We need a little more to make this page work. Tables, images, lists

Working with HTML Tables

<table> Start of a table
<tr> Start of a table row
<td> Start of table data
</td> End of table data
</tr> End of table row
</table> End of table
<table border="1"> Sets a border for the table
<td colspan="5"> Displays the particular table cell across 5 columns.
</table> End of table

Tables are of the easiest ways to put a web page together. Lets design a table to build your web site around. Delegate everything between <body> and </body> and type the following. Please note i am going to keep this very simple for the moment and after your table has being designed I will show you how to inset videos and photos.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<table border="1" width="800px" align="center">
<tr>
<td colspan="5">HERE WE WILL PLACE AN IMAGE LATER</td>
</tr>
<tr>
<td colspan="5" align="center"><h1><font color="#0000FF">My </font>Personal <font color="#FF0000">Web site</font></h1></td>
</tr>
<tr>
<td colspan="2">About Me</td>
<td align="center" colspan="5">Place a Video Here</td>
</tr>
<tr>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
</tr>
<tr>
<td colspan="5">Design Your Personal Video Web site Using HTML by Kevin Fahey</td>
</tr>
</table>
</body>
</html>

To see an example of how your document looks click here

Looks a bit boring so using simple HTML tags we can ad lists, horizontal lines and change image border color's, and sizes.

Image HTML Tags

<img src="image1.jpg"> To display image
<img align="middle" src="image1.jpg"> To align image
<img src="image1.jpg" width="150" height="200">
 To change the size of a image

Horizontal Rule HTML Tags

<hr> Display a line across the screen
<hr color="#CCCCCC"> Change the color of the line
<hr width="50%"> Change the width of the line

Table Data Alignment

<td align="center"> Align's the cell content in the center

 

Back to editing your HTML page. Replace all

<tr>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
</tr>

with :

<tr>
<td><img src="image1.jpg" width="130" height="110"></td>
<td><img src="image1.jpg" width="96" height="72"></td>
<td><img src="image1.jpg" width="60" height="48"></td>
<td><img src="image1.jpg" width="96" height="72"></td>
<td><img src="image1.jpg" width="160" height="120"></td>
</tr>

To see an example of how your document looks click here

HTML Lists Tags

<ul> Tells the browser to display a un-ordered list.
<li> The first item of the list
</li> End of first item. It add another repeat the process.
</ul> Tells the browser to end list

HTML HYPER LINKING

<a href="http://www.kevinfahey.net"> Site 1 </a> Links the text to a another url or web page. Replace this link with your favorite sites.
<a href="http://www.kevinfahey.net" target="_blank"> Displaying the web page in a new window.

Now to add a bit of style to about me using HTML links and lists tags. Using the information I have provided add information about yourself or what you want and and hyper links to another page which will open in a new browsers.

. To see an example of how your document looks click here

This is the HTML code I used in the example :

<p>About Me</p>
<ul>
<li>Name :<font size="-1"> Your Info Here </font> </li>
<li>Address : <font size="-1">Your Info Here</font></li>
<li>Age : <font size="-1">Your Info Here</font></li>
<li>Interest's : <font size="-1">Your Info Here</font></li>
<li>Hobbies : <font size="-1">Your Info Here</font></li>
<li>favorite Music : <font size="-1">Your Info Here</font></li>
<li>favorite Movie : <font size="-1">Your Info Here</font></li>
<li>Pets : <font size="-1">Your Info Here</font></li>
</ul>
<p>favorite Sites</p>
<ul>
<li><a href="http://www.sporting-info.com" target="_blank">Sporting-Info.com</a></li>
<li><a href="http://www.sporting-info.com" target="_blank">WebMastersMallorca.com</a></li>
<li><a href="http://www.masterbartending.com" target="_blank">MasterBartending.com</a></li>
<li><a href="http://www.santaponsamaps.com" target="_blank">SantaPonsaMaps.com</a></li>
<li><a href="http://www.greenhillsdisco.com" target="_blank">GreenhillsDisco.com</a></li>
<li><a href="http://www.kevinfahey.net" target="_blank">KevinFahey.Net </a></li>
</ul></td>

Almost there in part 2 I will explain how to embed and YouTube video and add a personal header.

Go to Designing a Personal Web site Using HTML is less than 30 minutes Part 2

 

Posted on 28th December 2007

Creating A Personal Video Web Site in 30 Minutes Using HTML

Posted on 28th December 2007

Creating Your Very First HTML Document Part 2

"Design your personal video web site in 30 minutes with my 3 part free tutorial"


Part 1 | Part 2 | Part 3

Embed A Video From Google In Minutes

Now to embed a video on your site: For all the free video sharing sites this can easily be archived. Take YouTube for example. Here I take a video from my one of my personal sites to use in an example. YouTube allows you to embed videos from third parties.

Click here - www.youtube.com

  • Search for a video of your interest and
  • Copy the embed code and replace "YOU TUBE VIDEO HERE" with the video embed code.

Here is an embed code for Break Dancers if want to save time going to YouTube

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/0GvBedkCS4k&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/0GvBedkCS4k&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

*Please note that your video might not play until your webpage has been uploaded to the interest.

 

Creating a Custom Header or Logo In Minutes

One of my favorites for quick designs: CoolText.com.

  • Follow the link and follow the simple instruction to creating a personal header or logo.
  • Save the image in the same folder and use saved the index.html and image1.jpg files. and replace HERE WE WILL PLACE AN IMAGE LATER with :

<img src="image2.jpg" alt="Build A HTML Personal Video Web site in 30 Minutes">

To see an example of how your document looks click here

An example of how your HTML code should look :

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<table width="719px" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="5"><img src="image2.jpg" alt="Build A HTML Personal Video Web site in 30 Minutes"></td>
</tr>
<tr>
<td colspan="5" align="center"><h1><font color="#0000FF">My </font>Personal <font color="#FF0000">Web site</font></h1></td>
</tr>
<tr>
<td colspan="2" align="right" bgcolor="#FFFFFF"><p>About Me</p>
<ul>
<li>Name :<font size="-1"> Your Info Here </font> </li>
<li>Address : <font size="-1">Your Info Here</font></li>
<li>Age : <font size="-1">Your Info Here</font></li>
<li>Interest's : <font size="-1">Your Info Here</font></li>
<li>Hobbies : <font size="-1">Your Info Here</font></li>
<li>favorite Music : <font size="-1">Your Info Here</font></li>
<li>favorite Movie : <font size="-1">Your Info Here</font></li>
<li>Pets : <font size="-1">Your Info Here</font></li>
</ul>
<p>favorite Sites</p>
<ul>
<li><a href="http://www.sporting-info.com" target="_blank">Sporting-Info.com</a></li>
<li><a href="http://www.sporting-info.com" target="_blank">WebMastersMallorca.com</a></li>
<li><a href="http://www.masterbartending.com" target="_blank">MasterBartending.com</a></li>
<li><a href="http://www.santaponsamaps.com" target="_blank">SantaPonsaMaps.com</a></li>
<li><a href="http://www.greenhillsdisco.com" target="_blank">GreenhillsDisco.com</a></li>
<li><a href="http://www.kevinfahey.net" target="_blank">KevinFahey.Net </a></li>
</ul></td>
<td colspan="5" align="center" bgcolor="#000000"><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/0GvBedkCS4k&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/0GvBedkCS4k&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object></td>
</tr>
<tr>
<td><img src="image1.jpg" width="130" height="110"></td>
<td><img src="image1.jpg" width="96" height="72"></td>
<td><img src="image1.jpg" width="60" height="48"></td>
<td><img src="image1.jpg" width="96" height="72"></td>
<td><img src="image1.jpg" width="160" height="120"></td>
</tr>
<tr>
<td colspan="5">Design Your Personal Video Web site Using HTML In 30 Minutes &copy; 2008 Kevin Fahey</td>
</tr>
</table>
</body>
</html>

Almost there, in part 3 we can modify the background colors and edit the footer.

Go to Designing a Personal Web site Using HTML is less than 30 minutes Part 3

Comment

 

 

 


Recent Posts

Posted on 22th December 2007

Big Image

Booted From Adsense

What a last few days. Never got around to blogging anything. I’m pretty new to running a web design company, updating my blogs, and affiliate marketing all at once. Plus decided to go and buy a few domains, also got my pin for Google to receive my payment. It paid off after all. A lot of hours, a lot of weeks for this payment but the other way to look at it is the unique content I published over the past 2 months will always be making me revenue, with my affiliate programs: CJ, Google Adsense, Paddy Power and more..read more or Comment

Recent Posts

Posted on 5th December 2007

Big Image

Google Adsense & Google Maps

Majority of web sites have ads. Some are placed by banner swapping, others by commission if somebody click on a particular ad and is re-directed to the web site and purchases an item or sign’s up for a services etc... And then we have pay-per-click ads. There are many of these but here I will talk about Google Adsense.. read all