Downloaded 31 times
Uploaded byphp Roots
Html basics
The document describes the basic structure and elements of HTML, including: - HTML pages have a head and body, with the head containing the title and meta tags and the body containing the visible content. - Common elements like headings, paragraphs, line breaks, and horizontal rules can be added with tags like <H1>, <P>, <BR>, and <HR>. - Font properties like color, size, style, and family can be modified with tags such as <FONT COLOR="red">, <FONT SIZE="5">, and <B>. - Links, images, and lists can also be inserted into pages to add navigation, media, and organized content.
More Related Content
Html basics
- 1. BY: PHPROOTS
- 2. HTML STRUCTURE. HTML, or hypertext markup language, is very simple to learn and very simple to use. HTML is used in most modern websites. HTML has two basic forms: <name attribute1="value1" attribute2="value2">Content of 'name'</name> and <name attribute1="value1" attribute2="value2"> HTML pages always start with a DTD, or document type definition. This allows the web-browser to determine what type of HTML you are using as well as what language the characters are in. After the DTD, you would continue with the HTML tag, like so: <HTML> ... </HTML> HTML pages has two main sections: the HEAD and the BODY, both contained within the HTML tags. The HEAD contains the title and sometimes meta tags. The BODY contains the main page that everyone sees. <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
- 3. Page Title Thetitle allows people to know what they are visiting and represents the page. When search engines add your website to their database, they add the title as what you see when searching for what you want. Page titles are very useful for letting your guests know just what is on you website. Always within HEAD tag . <TITLE>this is the title</TITLE>
- 4. Simple Headings Thereare six different simple headings that can be used (H1 to H6). Many websites use headings. You can use the following code to make headers. <H1>This is the Heading</H1> <H2>This is the Heading</H2> <H3>This is the Heading</H3> to <H6>This is the Heading</H6> <H1> produces the biggest, and <H6> produces the smallest. You can also center the headings by using the align attribute. Example: <H1 ALIGN="center">This is the centered Heading</H1>
- 5. Paragraphs Paragraphs arevery useful and should be used. <P>This is a paragraph.</P> <P>This is a second paragraph.</P>
- 6. New Lines Inorder to create a new line you would add the following code: <BR>
- 7. Spacing Spacing isalso very important. When using HTML, you can use just a space, but only up to the first space. Beyond the first space, the web-browser will just ignore. In order to do any amount, you must use the following code for each space wanted:
- 8. Horizontal rules Horizontallines can be added by doing the following code: <HR> You can also change the width of the line as well as align them to the left or right. <HR ALIGN="left" WIDTH="50%"> <HR ALIGN="right" WIDTH="50%"> Please note that you can have the width in pixels instead of percentages as well. You can also change the height in pixels by doing the following: <HR SIZE="5">
- 9. Comments Comments arevery useful for people that want to identify things in their HTML. They are used when multiple people update website. They are also used to "block" the HTML code. The user does not see a comment unless they view the source code. <! -- This is the comment -->
- 10. Changing Font Color <FONT COLOR="red">This is the text that the color applies to</FONT> This is the text that the color applies to Within the color field you may name a color, as shown, or you may use the HEX code of the color, which is the preferred method, as seen below: <FONT COLOR="#FF0000">This is the text that the color applies to</FONT> This is the text that the color applies to The color in hex code has a lot more ability and I would recommend that you use it so that you can have a unique website. The hex code of red then green and blue, all up to 255 but in hexadecimal code. Please note that not all monitors display all colors.
- 11. Changing Font Face Changing the face of a font is also very simple and useful. You can change the face of the font to whatever font you wish, but be careful, if a user does not have that font installed on their computer, then it will just show the default font. <FONT FACE="Webdings">This is the text that it applies to</FONT> Because people may not have the specific font type that you want it is a good idea to have backup font types separating them by commas, Changing the face of a font is also very simple and useful. You can change the face of the font to whatever font you wish, but be careful, if a user does not have that font installed on their computer, then it will just show the default font. <FONT FACE="Webdings">This is the text that it applies to</FONT> This is the text that it applies to Because people may not have the specific font type that you want it is a good idea to have backup font types separating them by commas, This is the text that it applies to <FONT FACE="BobsFont,Wingdings,Times New Roman,Times,Courier New">This is the text that it applies to</FONT>
- 12. Changing Font Size It can by using the size attribute, or by using the style attribute. The code for the size attribute: <FONT SIZE="5">This is the text that it applies to</FONT> This is the text that it applies to Using this method, you can change the font from 1 to 7. I would not recommend this method. You could also make the font change, compared to what it was right before as can be seen here: <FONT SIZE="+2">This is the text that it applies to</FONT> This is the text that it applies to As you can notice the font size increased by two font sizes from what it was right before. You can go from -7 to +7, where the -7 decreases the font size by seven and the positive increases it by seven. Another method of changing the font size it by using the following: <SMALL>The small text<SMALL> The small text <BIG>The big text<BIG> The big text The more commonly seen font size can be changed by using the font style attribute. You can use this code for modifying that: <FONT STYLE="Font-Size:20px;">This is the text that it applies to</FONT> This is the text that it applies to By using this, you can easily modify the font size from 1 and on. this is what most programs and websites use as their font size.
- 13. Bolding/Italicizing/Underlining/Striking You can bold something using the following code: <B>This is the text that it applies to</B> This is the text that it applies to Or you may bold by doing the following: <STRONG>This is the text that it applies to</STRONG> This is the text that it applies to Or you may italicize using the following: <I>This is the text that it applies to</I> This is the text that it applies to And another way to italicize is: <EM>This is the text that it applies to</EM> This is the text that it applies to Or you may underline using the following: <U>This is the text that it applies to</U> This is the text that it applies to Or you may strikethrough text by using the following: <STRIKE>This is the text that it applies to</STRIKE> This is the text that it applies to
- 14. Making Links Linksare extremely useful for bringing the user to another page that may be within your website, or may be another website that you think would be useful to others. You can create a simple link using the following code: <A HREF="http://tutorials.php">This is the text that it applies to</A> This is the text that it applies to There are several different types of links, for local pages, you would use something like the above. For links to other sites, you may use something like the following: <A HREF="source address">This is the text that it applies to</A> This is the text that it applies to
- 15. Making Links innew windows If you want to make new windows, you can use the following code: <A HREF="http://bobbys.us/tutorials.php" TARGET="_BLANK">This is the text that it applies to</A> This is the text that it applies to
- 16. Making Links toemail addresses <A HREF="mailto:[email protected]">E-mail me</A> E-mail me
- 17. Linking to somewherein the page You may also have a large page and want to link to different pieces of the webpage. In order to do this, first you must make location to link to. You can do this by using the 'name' attribute on the 'A' element, as can be seen here: <A NAME="section1">Section One - Downloads</A> This would create a place to link to called 'section1'. You can link to it by using the following code: <A HREF="#section1">Go to downloads</A> or by putting the name of the HTML document, like so: <A HREF="tutorials.php#section1">Go to downloads</A>
- 18. Adding images Toadd an image you can use the following code: <IMG SRC="images/one.gif" ALT="alternate text"> Once you add an image, you may notice that there is a border when you make the image a link. In order to get rid of this you will have to change the border attribute. Here is an example of how to change the border to a size of 0: <IMG SRC="images/one.gif" ALT="alternate text" BORDER="0">
- 19. Centering Text <CENTER>Thisis the text that it applies to</CENTER> This is the text that it applies to
- 20. Special Characters Inmany cases you may find that you may need to insert special characters. They are very simple to insert, if you know what each character is. © produces © & produces & ¢ produces ¢ ® produces ® ± produces ± ² produces _ etc...
- 21. Lists You mayalso have lists of items that you will need to add. There are several types of lists. The two most common ones are ordered and unordered lists. Ordered lists are called ordered lists because they have numbers for people to be guided by. Here is an example of an ordered list: <OL> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </OL> 1. Item one 2. Item two 3. Item three
- 22. Lists There arealso different types of ordered lists. Here is an example of a specific type of ordered list: <OL TYPE="I"> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </OL> I. Item one II. Item two III. Item three
- 23. Lists The 'TYPE'attribute can contain one the following types: 1, a, A, i, or I. Unordered lists are similar to ordered lists, except that they have bullets instead of numbers. Here is an example of an unordered list: <UL> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </UL> Item one Item two Item three
- 24. Tables Tables areused in many websites. Although they are not always seen, tables are very good at aligning certain things. In fact, this website uses tables, but you probably cannot see them. Tables have many attributes that can be modified to fit exactly what you want. Simple tables can be added by doing the following: <TABLE BORDER="1"> <TR> <TD>top left</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom right</TD> </TR> </TABLE>
- 25. Tables Here is what it would look like without a border: <TABLE> <TR> <TD>top left</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom right</TD> </TR> </TABLE>
- 26. Tables <TABLE BORDER="1"> <TR> <TD>top left</TD> <TD>top - column 2</TD> <TD>top - column 3</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom - column 2</TD> <TD>bottom - column 3</TD> <TD>bottom right</TD> </TR> </TABLE>
- 27. <TH> canbe used instead of <TD>. The difference between the two is that TH is bolded and centered, whereas TD is left aligned and unbolded.
- 28. Thanks alot any query Visit http://www.phproots.com