Writing html for websites and blogs Website Development Writing html for websites and blogs
Building a website: Setup 1 Create a new folder to contain pages (html files) Name the folder: Your_name_website Save files every day to this folder. Your entire website will be kept in this folder. Make a separate folder inside the website folder called Photos. This is where you will keep all the photos for the site. Keep all photos as .jpeg files as 72 dpi. Photos can be resized as needed. All photos should be at least 600 pixels (px) in width.
Building a Website: Overview
Godaddy.com, Ipage.com, Wordpress.com. Prices range from free to $10 per month. Yahoo.com, baidu.com, thaicanuck.com. Very cheap to purchase a domain name!! What is your site about? What pages will you need? Will you be selling items? Make the pages using html or build on a site that provides the tools. Upload the pages to the server by FTP process. Advertise and promote to obtain visitors (traffic) to your site.
Building a Website: Setup 2 WINDOWS All coding is done in Notepad Save files as .html OR change the name to .html The main page of each website is called the Homepage and is always named index.html The other pages can be named to reflect their content MAC There are several free programs to use for coding. Text Wrangler is a good free program to use for coding. The main page of each website is called the Homepage and is always named index.html The other pages can be named to reflect their content
Building the first page: index.html Tags are used to tell the Internet how to read the page. Each tag has an opening and a closing form. <html> shows that it is a website. At the beginning of each page. </html> shows the page is finished. At the end of each page. <title> and </title> contain the title of the page. <body> and </body> contain the body of the page. All the stuff in the middle is between these two tags.
Html code for index.html page Open a new Notepad file. Type in the following html code and use your own information. <html> <head> <title>My Website</title> </head> <body> Hello! My name is Mr. LePoidevin. I come from Canada. </body> </html> 3. Save the file as index.txt to your website folder. Save the file as index.html to your website folder. Open index.html. It should appear as a web page.
Inserting a Photograph Find a photograph at least 800 pixels wide. Use GIMP to resize to 800 px X 400 px. - open in GIMP and scale to 800 pixels in width. - use Crop Tool to change the height to 400 pixels. - save photograph to My_Website > Photos. Open the text file, index.txt and add the following line of code after the <body> tag at the top of the page. <img src=”Photos/your_photo_name” />
New Text File with Image Added <html> <head> <title>My first Website!</title> </head> <body> <img src = “Photos/tianjin.jpeg”/> This is my first website! This is where all the text will go. I can change this in the future. </body> </html>
To drop text below photograph <html> <head> <title>My first Website!</title> </head> <body> <img src = “Photos/tianjin.jpeg <br /> This is my first website! This is where all the text will go. I can change this in the future. </body> </html>
Checking pages… Be sure to check each .html page by opening it to see if it works. Add all photos to the Photos folder, originals and resized photos. Assignment #1 1. Make four more pages and place in your folder. (total of five) 2. Each page should have an 800 x 400 photo at the top and a line of text along the bottom of the picture. 3. Name them Page1, Page2, Page3 and Page4. 4. You should have 5 pages including the index page.