Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,200,513 members, 7,975,060 topics. Date: Monday, 14 October 2024 at 03:54 PM |
Nairaland Forum / Science/Technology / Webmasters / Free Website Design Tutorial (1020 Views)
SMF Forum Design Tutorial / Responsive Web Design Tutorial From Scratch / Free Website Design Tutorial (2) (3) (4)
Free Website Design Tutorial by hillus: 5:09pm On Jan 14, 2013 |
HTML CLASS 2 In our last class, we discussed about the structure/syntax of HTML coding, we also touched bckground color and heading. PLEASE IF YOU ARE JUST JOINING SCROLL DOWN TO PREVIOUS CLASS (FIRST CLASS) SO AS TO UNDERSTAND THE PART 2 In today class, we will be looking at the following: Line Break Paragraph Horizontal Line Alignment Adding of Link/types of Link Line Break In our last class, i mentioned that HTML doesn’t consider space that’s to say that to give space you have to use code to accomplish that Line break function more like enter key in the keyboard. Whatever the enter key does in a wordprocessor that’s what line break does in HTML The syntax is <BR/> Practice <html> <body> This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers ATM cards <BR/>which will allow them to withdraw cash at will from ATM machines, therefore (indirectly) eliminating the stress and cost of your MFB collecting cash from your commercial banks repeatedly. </BODY> </HTML> Save and open, you will notice that line of text after <br/> entered into a new line. it can be used as many time as possible Paragraph: I don’t need to explain this everybody know what paragraph is The syntax is <p> Practice <html> <body> <P> This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers ATM cards which will allow them to withdraw cash at will from ATM machines, </P> <P>therefore (indirectly) eliminating the stress and cost of your MFB collecting cash from your commercial banks repeatedly</P> </BODY> </HTML> Save the page and open it, you will notice that each text are on a different paragraph Horizontal Line: Horizontal line functions like a ruler. If you want to run a line on your webpage, you will need a horizontal line The syntax is <HR> Practice <html> <body> <HR> </BODY> </HTML> ALIGNMENT: By default HTML start from left, that include image, audio etc. but if you want to make something positioned at the center or right. You use alignment The syntax is <align=”position”> Position=left, right, center Practice <HTML> <BODY> <P ALIGN=”RIGHT”> This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers</P> </BODY> </HTML> Save and open, you will notice that the text is centered Adding Link: you might have seen a link on a website and may have wonder how it happened, today i will show how to do that. There are two ways to do it: <a href=”url”>Link text </a>: this will load the link on the page the link is located on But if you want it to load on a new page <a href=”url” target=”_blank”>link text </a> Practice <html> <body> <a href=”google.com”>Visit Google</a> <a href=”nairaland.com” target=”_blank”>Nairaland</a> </body> </html> Class Dismiss If you have a question, contact me @ 08037588749; mark.ugwuanyi@yahoo.com or ask the question in the forum Next class we will explore color, font format etc, insert image and character formatting If you want to own a WEBSITE or a BLOG OR FORUM, then contact me If you are interested in EASY AND COMPLETE VIDEO TUTORIAL contact me Class continue tomorrow, Let start.... HTML CLASS 1 Before I Start, let me say that: Web design on it's own is a lurcative business, Before i start, it is important for you to know that web design can be achieved into ways. Which are HTML and CMS (Content management system) Although cms comprise of html, php or aspx. But in this tutorial, I will start with HTML5 [the latest version] NB: I not much a theoritical person but more of practical. So get ready for some practices along the way. So little introduction, more of pratical For safe pratice as a beginner, open a folder in your system where you will be storing your your pratice webpage for future reference Today's Class Outline In today's class we will be looking at the following 1.0. What is HTML 1.1. Working Envirnoment/HTML syntax 1.2. Testing your HTML Codes/Editing a webpage 1.3. Basic Part of HTML Codes Structure 1.4. Head Part 1.5. Body Part 1.6. Footer Part 1.7. Titling Your Page 1.8. Set Background Color 1.9. Heading 1.0. What is HTML HTML simply mean HyperText Markup Language. It convert a simple word text into a web page, that what we will be exploring in this tutorial. There have been many version of HTML, but the only different is addition of new tag - codes to performing certain function. With HTML you can design a static site Enough talk let get to work NB: HTML like most programming langauges is not case sensitive and it don't regard space 1.1. Working Envirnoment /Syntax Envirnonment is a term used by programmer(am a web application developer). It simply mean platform on which you work (code) from HTML can work with various platform ranging from one software to another, but the basic platform you can use for the coding is notepad [every system has it] Let start, open your notepad [for xp user, click on start, click on all program, select accessories, then click on notepad. For Vista and upward: click on start, type notepad and select notepad from the list ] Every programming language or code has it syntax. Now HTML syntax is alway in a closed tag example <HTML>, <HEAD> etc Every tag must have a closing. It must be closed with a "/" example: </HTML>, </HEAD>, </BODY> A TYPICAL EXAMPLE <HTML> <BODY> we are learning HTML </BODY> </HTML> You will notice that every tag was closed <html> was closed with </html>, <body> was closed with </body> Also notice the order "First opened is closed last, and the last opened is closed first" <html> was opened first and was closed last </html>, <body> was opened last (after <html> but was closed first Let me give you a hint that will help you remember: <1> <2> text </2> </1> 1.2. Testing your HTML Codes You many be wondering how your notepad will turn into a webpage. Just watch we will be doing little "magic" by turning notepad to webpage. 1.Click on save or use save as 2. when the save dialog box appear, in the filename, type in the name you desire and ended it with ".html" Example: assuming I want to save the page with a filename as "hillus". It will be "hillus.html" 3. After that click on save. 4. Now go to the location you saved your file and you will note you will no longer see a txt but a webpage with that filename Editing a webpage Now when you close your notepad, you will notice that you are only left with a webpage, to open it, just do the following 1. Right click on the webpage 2. Select "Open page " 3. Then select notepad And your notepad coding envirnonment is back 1.3. Basic Parts of HTML Codes Structure HTML has some basic part of the structure that is essential. They include: 1. Head 2. Body 3. Footer (most beginner, dont normally make use of it, but expert do use them. In the beginning of this class, i wouldnt be using it, but later on, i will) Below is the way a standard webpage format look like <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Let me explain; <html> is the container of the whole html coding: that is, everything is done within it. You will notice that Every other tag was within the <html> </html> Hint for easy rememberance: <HTML> your coding </HTML> 1.4. Head This deals with the head section of the webpage. It is in this section you determine the properties of your heading and you can also title your webpage under this section It is like <HEAD> ...</HEAD> 1.5. Body It is just like a letter deals with the body of the webpage. It is just like the body of a letter. This is where the man body comes in <BODY>....</BODY> 1.6. Footer It doesn't need much explanation. by the name deals with the bootom of the webpage 1.7. Titling your Webpage I will show how to give a title to your webpage. what do i mean by title: you will notice in most webapge you open, in the tab of your webpage you will see a title for example nairaland has "Nairaland Forum" You achieve this by <title> Do the following or copy it: Open a new notepad <HTML> <HEAD> <TITLE> My First Webpage Design </TITLE> </HEAD> </HTML> Then save the page as i showed ".html", then open the webpage you will see "My First Webpage Design" as the top of the webpage in the web browser 1.8. Set Background Color Let add background color to a webpage. It actualize this by using: "<BGCOLOR="COLOR">" There are too way to specify color: by text or by hexadecimal For now we will make use of text example <bgcolor="yellow"> Do the following open a new notepad <HTML> <HEAD> <TITLE> Background color</TITLE> </HEAD> <BODY BGCOLOR="YELLOW"> </BODY </HTML> Then save and open the webpage you will see the background is yellow 1.9. HEADING here we can specify various heading for your webpage, there include h1,h2,h3,h4,h5,h6,h7 Let pratice: open a new notepad <HTML> <HEAD> <TITLE> Headings</TITLE> <H1>Headings</H1> <H2>Headings</H2> <H3>Headings</H3> <H4>Headings</H4> <H5>Headings</H5> <H6>Headings</H6> <H7>Headings</H7> </HEAD> </HTML> Then save your page and open it you will notice the various sizes of the headings: h1 is bigger, h2 followed, then h3 and so on. Today Class Dismiss.. I will continue Tomorrow I am Mark Ugwuanyi by name, Invite Your Friends If you have any question, you ask it here in the forum or address it to my email address mark.ugwuanyi@yahoo.com or call me 08037588749 HTML web design Video Tutorial In case if you need a video tutorial of this whole class, just contact me CHEAP WEBSITE AND FORUM SITE INCASE YOU NEED TO OWN A WEBSITE OF YOUR OWN OR EVEN A FORUM JUST LIKE NAIRALAND CONTACT ME mark.ugwuanyi@yahoo.com or call me 08037588749 Thanks |
Re: Free Website Design Tutorial by Otolorin4real(m): 7:20pm On Jan 14, 2013 |
[quote author=hillus]I decided to start a website design tutorial, am just wondering, if people will be interested instead of wasting my time. [b]IF YOU ARE INTERESTED JUST COMMENT...IF AM ABLE TO GET 2 OR 3 PEOPLE, THE CLASS START IT IS YOUR DECISION [Dont waste more time i am interested and ready to go,let get started ! |
Re: Free Website Design Tutorial by witken90(m): 7:32pm On Jan 14, 2013 |
tanxtanxtanx...tanx |
Re: Free Website Design Tutorial by witken90(m): 7:34pm On Jan 14, 2013 |
i need it sir |
Re: Free Website Design Tutorial by Nobody: 12:57pm On Jan 15, 2013 |
am with you sir go on |
Re: Free Website Design Tutorial by Judexman(m): 8:51am On Jan 16, 2013 |
pls continue |
(1) (Reply)
All Wapka Wapmasters Get Unlimited Hits ! / Getting Super Alexa Traffic Rank Without Getting Real Traffic/taking Any Actions / Develop Your Own Bulksms Component With Your Name & Brand Today
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 33 |