ANATOMY OF WEB PAGE What is HTML? HTML is a publishing language that all computers may potentially understand and Immediately interpret as the initializing and formatting instructions that go into the making of a web, page. Each keyword or abbreviation in HTML is known as an element and each HTML element is enclosed in angle brackets like this... <> This 'angle bracket/ HTML element’ assembly is known as an HTML 'tag' and all HTML elements have at least a start tag and a majority of them also have an end tag. Web page: A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages." Website: A collection of web pages which are grouped together and usually connected together in various ways. It is often called a "web site" or simply a "site". Web server: A computer that hosts a website on the Internet. Search engine: A web service that helps you find other web pages, such as Google, or Yahoo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a webpage (e.g. sospoly.edu.ng). Basic HTML Necessities You may have thought that you needed to install some kind of Complex web design doohickey to write up some basic HTML code but really it's not as hard as all that. Chances are you already have everything you need right on your own computer. In fact -believe it or not- you don't even need to be hooked up to the internet to create display a web page. What you will need, however, is the following: A basic text editor ~ A text editor differs from a word processor (like WordPad) in that it saves text to a file completely stripped of any formatting (such as italics, bold, font colors, etcetera. A method of saving text to a file so that it only contains the text and nothing else is essential to create a web page. Remember that web pages are text files which apply all the formatting using HTML code. All Windows Operating Systems contain a text editor by default called 'Notepad. If you're on a Mac then you can use SimpleText. A means to save files: If you working on your own computer at home or at the office then this is not a problem. You will be saving your web page file to your hard drive (typically drive C:). If you're currently at an internet café then you'll probably need a floppy disk to save your web page files to (typically drive A:) so that you can remove it and take it with you after you're finished. A web browser the software that creates the interface on your computer screen that allow you-to browse the internet and view web pages is known as a web browser. Contrary to what you 'might believe, you do not have to actually be online to use a web browser: "Its just that most people have their web browser's home page set to some online web address (like Yahoo, MSN, Google, etc) so when they first open up their web browser, it immediately tries to load one of those pages. You can, however, actually set your web browsers home page to be a web page you created on your own computer. Some basic typing skills: This isn't an absolute necessity in order to make a web page but it will certainly help a lot. If the web design bug hits you bad (like it hit me) then you're going to want to be able to do more on a computer keyboard than just hunt and peck'. If you're a student then now's the time to sign up for that typing class. There are also numerous online typing courses you can take that will have your fingers flying-over that keyboard in no time at all. Basic HTML Web Page Structure A web page constructed using HIML has a basic and essential structure. The page always begins with the start tag of the html element and always terminates with the end tag of the html element as follows. Example1 <html> ….. web page.. </htm> The html element basically tells your computer that this is an HTML document. All other element tags are nested within the start and end html tags. The web page is then further subdivided into two main sections which are the ‘head’ and the ‘body’. The head section begins with the <head> start tag and terminates with the </head> end tag. Immediately following this comes the <body> start tag and just before the html end tag comes the </body> end tag. There is only one set of <html>…</html> tags, one set of <head>…</head> tags and one set of <body>…</body> tags. This basic HTML web page structure can be illustrated by the1ollowing example: Example 2 <Html> <head> Page tasks and administration the visitor doesn't see meta tags for SEO links to files that control styling links to executable files executable code and styling </head> <body> Display elements that the visitor does see Navigation Branding Text Images Videos Audio Links Forms Slide shows Footer </body> </html> The head section or document head has little content and mostly contains HTML coded body on the other hand contains almost all of the content that you will put on your web page and this content-usually text but can also be pictures and sounds is formatted using more HTML code. All text that you place outside of any angle brackets will become visible text and will be displayed by your web browser on your web page. By placing that text in between the start and end tags of certain HTML elements, you can instruct a web browser where and how to display that text. Adding a Title to your Web Page Web pages usually have a title that appears in the title bar that runs across the very top or the web page. This title is created using the <title>... </title> tags which are themselves always nested, within the <head>…. </head> tags. All text appearing after the <title> start tag and before the </title> end tag will be displayed as your web page title. Hence the following HTML code will produce a web page entitled 'My Home Page'. Example 3 <html> <head> <title> My Home Page </title> </head> <body> </body> </html> Adding Content to your Web Page Now to add some content to your web page all you have to do is type some text in between the <body>……<body> tags. So let’s, for example, put words ‘WELCOME TO MY WEB PAGE’ on your web page. <html> <head> <title> MY HOME PAGE</title> </head> <body> WELCOME TO MY WEB PAGE </body> </html> This will produce page like this Easy step by step instructions 1. Start notepad by clicking on Start >> Run… Then type in ‘notepad’ (without the quotation mark) and click OK. 2. Resize Notepad to fill the bottom half of your computer screen 3. Type the following code: 4. To save this file as an .html file in Notepad, click on file>> save As. The save As dialog will pop up and should by default open to the root directory of drive C: if not then navigate there using the ‘Up One Level’ button. Now just to keep organized, use the Create New Folder, double-click on it to open it in the Save As dialog. Now click on the drop down menu beside the save as type text box and select All files (*.*). After this, in the File name text box, type in “my page.html” with the double quotation marks and then click on save. 5. To view your ‘creation’ in your web browser (don’t close notepad yet), go to your desktop and double click on: 6. My Computer >> Drive C: >> Home page.html. Congratulations. You’ve just learned how to make a web page.
