Single Property Website Course - Become an HTML Expert – Day 4
Single property website course become an HTML Expert Day 1
Single property website course become an HTML Expert Day 2
Single property website course become an HTML Expert Day 3
By Bruno Roldan
In todays HTML crash course i am going to go over a few tags, then dive straight into starting our single property web page.
Styles
Its quite simple to apply styling to your text.
To apply styling to your text do the following:
Type the desired tag before and after the text you would like to stylize:
You can also apply more than one style to the same text. For example:
Lists
There are two types of lists; ordered lists and unordered lists.
Ordered lists are ordered by numbers: 1,2,3,4,5,6,
text
text
text
text
Type <ol>name of list - before the name of the list and ending tag at the end of list </ol> and <li> before every element in the list.
Example:
<ol> Testing List
<li>point 1
<li>point 2
<li>point 3
<li>point 4
</ol>
Where </ol> closes your ordered list. You can similary do this without the name of the list and simply put <ol> before your first point <li>.
Unordered lists are made with bullets.
Type <ul>name of list - before the name of the list and ending tag at the end of list </ul> and <li> before every element in the list.
Example:
<ul> Testing List
<li>point 1
<li>point 2
<li>point 3
<li>point 4
</ul>
Where </ul> closes your ordered list. You can similarly do this without the name of the list and simply put <ul> before your first point <li>.
Pictures
Before inserting pictures please consider the following points:
Images are always located in the same file where your HTML document is located.
Including to many images slows page download.
Same picture can be used more than once on the page.
Inserting Pictures
To insert an image do the following:
Type <img src= “file/nameofpic.jpg”>
How to align text next to a picture:
Type align=xxx in the image tag
<img src= “ file/nameofpic.jpg” align=midle>
Where xxxx = middle, left or right
Ok so lets start with your single property website!
Note: my web folder is on my desktop and within that folder theres a sub folder called images that contain the sample property images.
Open a new folder on your desktop and name it: singleproperty
Open your note pad write and write open your html,head,title and body tags and save the file as website.html
It should look like this:
<html>
<head>
<title> Your Property Address </title>
</head>
<body>
</body>
</html>
Open your html file in your note pad
Insert the color you want as your background inside the opening body tag <body>
Insert the text color you want for your document inside the opening body tag <body>
Insert the your H1 and align it in the center or <h1>
Insert an image and align it in the center <center>
make an unordered list with the property details <ul>
Insert three images and keep them aligned in the center
The HTML would look like this:
<html>
<head>
<title> Your Property Address </title>
</head>
<body bgcolor=#3399CC text=white>
<br>
<br>
<H1 align=center><b>115 Beautiful Website Av </b></H1>
<center>
<img src="images/Front.jpg" align=middle width="350" height="300"><b>Contat Bruno Roldan - 866 668 5237</b>
<br>
<ul>Property Details
<br>
<br>
<li> Price: $500,000
<br>
<li> Square Free: 3000
<br>
<li> Condo Fees: $215/month
<br>
<li> Rooms: 4
<br>
<li> Rest Rooms: 3
<br>
</ul>
<img src="images/bruno002.jpg" width="250" height="200">
<img src="images/bruno007.jpg" width="250" height="200">
<img src="images/bruno009.jpg" width="250" height="200">
</center>
</body>
</html>
When you open your html document in your browser this is what you should see:
Sorry about the images, i only have paint on my lap top and it was crashing on me but you get the idea....
Yes it doesn't look perfect yet! We will keep on adding more things to this site as the course progresses :)!
Cheers, and ill catch you in tomorrows HTML crash course!
;)
;)
