|
Seo Master present to you:
Ch1. Introduction to HTML crash course: Hey people, in this crash course, You gonna explore the HTML language with me. I already have created table of contents for this crash course . So let me just give you a quick review on what we are gonna be learning in these 15 days crash course of HTML. Wanna learn programming in order to build a website then visit >> How to create a website for free Ch2. Overview: HTML acronym for hyper text markup language. It is the most widely used language to build web pages. HTML is simply a collection of certain keywords called tags. HTML is a platform independent language i.e. It supports all operating system i.e. Linux, Windows, Mac etc. Hyper text: The term Hyper text was coined in 1965 by Ted Nelson. It is a text which contains links to another text. Hyper text is not constrained to be linear i.e. It is written inside tags. Markup language: is the combination of words and symbols which gives instructions on how a document should appear e.g. We use tags for Italic and bold. Ch3. Fundamentals of HTML1. Creating Saving and Weaving a HTML document
This is the basic structure which is always followed in every HTML document. You just have to type it in your notepad and then save it as an extension ".htm" or ".html" and your HTML document will get created. <HTML> <HEAD> <TITLE> This will be displayed as your title for your document</TITLE> </HEAD> <BODY> </BODY> </HTML> Tags in HTML are instructions that are embedded directly into text of documents. HTML Tags are signals to a web browser that what it should do something other than just throw the text on screen. All HTML tags begin with an open angular bracket "<" and end with closing angular bracket ">" e.g. <tag name> Types of HTML Tags HTML tags are of two types: i). Container(paired):- Tags which have both opening and closing i.e. they hold text and other HTML tags in between the tags e.g. <b> some text in bold </b> <i> some text in italic </i> ii). Empty tags:- these are tags which have only opening and no endings are known as empty tags in HTML. Body tag Attributes:- This tag is used for defining body attributes i.e. <body bg color="red"> <body background="image"> <body text="color name"> <body left margin="pixel"> similarly, it's <body top margin="pixel"> <body right margin="pixel"> FORMATTING WEB PAGE:- i). Section Heading: There are 6 section heading tags in HTML. It starts with <h1> tag and goes down to <h6>. If a content is written in <h1> tag then it is the biggest of all in size, <h2> heading tag are slightly smaller in size as compared to <h1> tag and this trend follows till <h6> and <h6> is the smallest section heading tag available in HTML. <H1> Biggest of all</H1> <H2> Bigger</H2> <H3> Big</H3> <H4> Small than h3 tag </H4> <H5> Smaller</H5> <H6> Smallest of all the above</H6> ii). Paragraph Tag: this tag indicates two paragraph to get separated by a blank line. i.e. <p> hello this text is written inside a paragraph tag and it will get separated with a blank line</p> Attributes of Paragraph Tag Alignment attribute: This align attribute is used in paragraph to arrange the paragraph according to the ones look and feel. A paragraph could be aligned in 4 ways using align attribute. i.e. align="right/left/center/Justify" e.g.
We can also pass attributes like bgcolor to change the background color of the paragraph e.g. <p align="right" bgcolor="blue"> Your paragraph text here</p> Here the text written inside the <p> </p> tag will get aligned right and will have blue color. iii). Line Break Tag: this is an empty tag and is used whenever we want to start a new line. Tag- <br/> e.g. <body> Hello! I am shiv and I am your host and guide here.<br/> I live in India. </body> Note: As you insert <br/> tag in between the sentence it will start write "I live in India." in a new line. iv). Horizontal Rule Tag: It's an empty tag used to draw a horizontal line. Attributes of Horizontal Rule Tag
v). Pre Formatted Tag: this <pre> tag is used to print your text as it is written. It preserves the spaces and line breaks in the text written inside the tag. e.g. <body> <pre> Shiv kesh dubey Your host and guide Lives in India You are currently learning HTML </pre> </body> vi). Text or Character Formatting Tags: It is used to specify how a particular text should be displayed on the screen to distinguish certain characters withing the document.
vii). Font Tags: It is a deprecated tag used with attributes i.e. Face, Size, Color. e.g. <font color="red" face="arial" size="px"> Text </font> NOTE: Attributes sequences does not matter. Size also takes values between 1 to 7. The default size is 3. e.g. <font size="5" color="red"> Your text here </font> Ch5. Symbols in HTML
NOTE: Here you only have to paste the code of the Symbol and the symbol will get generated itself. Ch6. Lists in HTML There are two types of lists in HTML: i). Ordered List ii). Unordered List i). Ordered List: It is written as <ol>. An ordered list is also called a numbered list. It should begin with <ol> tag followed by <li> tag. Attributes:-
NOTE: Start position is where you wanna start your ordered list from. If you wanna start from 10 then you type in <ol type="1" start="10"> and your ordered list will get started from 10. ii). Un Ordered List: It is written as <ul>. An unordered list is also called a bulleted list, used to present list of items marked with bullet. It should begin with <ul> tag followed by <li> tag. Attributes:-
NOTE: There is no Start position in an unordered list. The default type of unordered list is disc. e.g. Code of unordered list <ul type="square"> <li>HTML</li> <li>CSS</li> <li>JAVA SCRIPT</li> <li>PHP</li> </ul> OUTPUT
iii). Nested List: A nested list is actually not a type of list in HTML but it is actually a combination of both ordered and unordered list together. e.g. Code of nested list <ul type="disc"> <li> <ol> <li>Chemistry</li> <li>Maths</li> <li>Physics</li> </ol> </li> <li> <ul type="square"> <li>History</li> <li>Geography</li> </ul> </li> </ul> OUTPUT
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ <a href=”#head”>Top</a> <a name=”foot”></a> Linking Images in HTML <a href=http://www.google.com><img src=”Google logo.jpg” alt=”/></a> HTML Tables:Tables are defined with <table> tag. A table is divided into rows with <tr> tag and each row is further divided into data cells with the <td> tag. We can also use table heading <th> tag in place of <td> tag in 1st row. e.g.
It’s Code: <table> <tr> <td> Roll No </td> <td> Name </td> <td> Address </td> </tr> <tr> <td> 1 </td> <td> Anuj </td> <td> Lucknow</td> </tr> <tr> <td> 2 </td> <td> Shiv </td> <td> Allahabad </td> </tr> </table> Attributes of Table Tag: 1. Align: It is used to align the table according to our requirement. E.g. <table align=”left/right/centre”>2. BgColor=”color name/color code” 3. Cellpadding: Cell padding is used to give internal gaps around the cell content. E.g. <table cellpadding=”5px”> 4. Cellspacing: Cell spacing is used to give marginal gaps between the cells. E.g. <table cellspacing=”5px”> 5. Height: It is used to assign the height of the table e.g. <table height=”5px”> 6. Width: It is used to assign the height of the table e.g. <table width=”5px”> 7. Border: It is used to set the border height of the table e.g. <table border=”1px”> 8. Colspan: It is used to merge two or more columns in one table. e.g. <table> <tr> <td></td> <td Colspan=”2”></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 9. Rowspan: It is used to merge two or more rows in one table. e.g. <table> <tr> <td rowspan=”2”></></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 10. Valignment: It is an attribute of <td> tag. It is used to align images or text from top, bottom, right or left of the <td> cell. E.g. <table> <tr> <td valign=”top”> Hello this is Anuj</td> <td Colspan=”2”>Here is my pic.</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 11. Rowspan: It is used to merge two or more rows in one table. e.g. <table> <tr> <td rowspan=”2”></></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> Note: We can also use attributes like align, BG color, height, width in <td> tag. HTML FORMSForms are used to pass data to the server. It can contain input elements like text field, check boxes, radio button, submit button etc. These elements are enclosed in form tag.E.g. <form> Form elements </form> HTML Form Elements: 1. Input type: It is used to create an input box in order to insert value inside e.g. Code: <input type=”text” name=”first_input” value=”it’s the value which we want to be displayed by default” maxlength=”no of characters” disabled=”disabled” read only=”read only”/> 2. Password field: Password field is used in HTML forms to insert password specified by the user in the table. E.g. <input type=”password” size=”” name=”” maxlength=”it is used to limit the size of password and it is given in numeric characters”> Output: 3. Radio Button: It let the user to select only one choice from multiple options. i.e Code: <input type=”radio” name=”” value=””/> 4. Check Box: It lets the user select multiple choices. Code:<input type=”checkbox” name=”” value=””/> 5. Combo Box: It is used to select a value from the drop down list. i.e. Code: <Select name=“”> <option value=””>Country</option> <option value=””>India</option> <option value=””>China</option> <option value=””>Japan</option> <option value=””>France</option> </selected> Note: i. The option value written first is the default value type. ii. To change the default value type we use “selected” term. i.e. <option value=”” selected>China</option> 6. Button: It is used to create button in HTML forms. E.g. <input type=”button” name=”” value=”submit”/> 7. Submit Button: Unlike the ordinary button, submit button is used to submit the form e.g. <input type=”submit” name=”” value=”submit form”/> 8. Reset Button: Reset button is used to reset the HTML form values. E.g. <input type=”reset” name=”” value=”Cancel form”/> 9. Text Area Field: Text area field is used in HTML forms to create text box area where one could write while submitting the form. E.g. Code: <textarea name=”” rows=”specify the no of rows in numbers” cols=” specify the no of coloms in numbers”> </textarea> |
Labels: basic html tutorial, beginner html tutorial, html basic tutorials, html tutorial, html tutorial for beginners
