Introduction to HTML

Category: Education

Presentation Description

What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language; HTML describes the structure of Web pages using markup; HTML elements are the building blocks of HTML pages; HTML elements are represented by tags; HTML tags label pieces of content ...


Presentation Transcript

slide 1:

Introduction to html Professional Guru BY

slide 2:

WHAT IS HTML HTMLHypertext Markup language is the language used to create web pages.  HTML language uses tags to create the web pages.  Browsers read these tags to display the output to the user. Note that html is interpreted browsers and hence we dont need to compile it. Professional Guru

slide 3:

TAGS Tags are Predefined keywords inside angular brackets. Example : To represent body tag in html we need to put it inside angular brackets like body . Now this is how we write body tag inside html page. Example of other tags are html p h1 etc. Lets consider the example of a building. So how we create a building. We add bricks tiles pillars and other materials in a prope order and then we use cement and create a building. Similarly for a web page we add materials like different tags and finally add them up to create a web page. Professional Guru

slide 4:

HTML FILE STRUCTURE The root tag is html  It has two child tags as head and body Professional Guru

slide 5:

DOCTYPE  TAG Document Type Declaration or DOCTYPE declares which version of html is being followed by the document. Note that doctype is not a html tag it is just used to tell the browser about the version of the html to follow for the current code. Note that Doctype should be the first tag in html code.  In html version there are three types of DOCTYPES can be used :                        Strict Transitional Frameset. Example: This is an example of Transitional type doc type. Professional Guru DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional //EN"""

slide 6:

HEAD TAG The head tag contains the header information link to scripts and metadata about the web page. The head tag is placed outside the body tag. Lets look at a code snippet having doctype head and body tag included. The title tag is contained inside head tag. It is used to show the title of the web page. 1. title - specifies the title for a web page 2. meta - specifies the content type 3. link - used to call an external CSS page 4. style - specifies that CSS is written inside this tag 5. script - specifies that JavaScript is written inside this tag Professional Guru Head Tags has Child Tags

slide 7:

META TAGS keywords attribute defines keywords for search engines: meta name"keywords" content"clothes fashion fashion accessories" Description attribute describes your web page: meta name"description" content"Buy fashin clothes and accessories online" Revised attribute define the last revision of your page: meta name"revised" content"Hege Refsnes 23/10/2011" http-equiv attribute Refreshes document every 10 seconds: meta http-equiv"refresh" content"10" Professional Guru

slide 8:

FIRST HTML Open any editor of your choice or use notepad and type in the code shown below. After typing it save it as first.html file and open it in a web browser. Hey.. you have created first web page. html     body         h1 Hi .. I am a heading/h1     /body /html Professional Guru

slide 9:

HTML BASICS Lets now dissect the code. The first tag is the root tag which is html.  All html files need to have html as the starting tag.  The body tag contains the tags that display the output to the browser. We have h1 tag which is the headline tag. We have h1 to h6 tags where h1 has the largest font size and h6 has the smallest. Whatever content we write inside the h1 tag it will become a headline with bold and increased font size. Next is the closing /body tag followed by the closing /html tag. Note that we add a slash in the beginning to close it. So if the beginning is body tag to end the tag we add a slash and it becomes /body. Lets understand other html tags in the next section. Professional Guru

slide 10:

TYPES OF TAGS Professional Guru Standard tags : Standard HTML tags have opening and closing tag. Ex : body/body h1/h1 Self closing tags: These are tags which dont have a closing pair of tags.  Ex: br tag which is line break.

slide 11:

BLOCK ELEMENTS                     VS INLINE ELEMENTS Professional Guru

slide 12:

BLOCK LEVEL TAGS Professional Guru Block level tags: Block level tags add a line break for the content Ex: h1 p for paragraph tags. A block element will take the complete horizontal area of the web page. So you add a block element the next element will be placed in next line only.

slide 13:

INLINE TAGS Professional Guru Inline tags: Inline tags dont add a line break. Ex: boldb tag which makes the content in bold letters.

slide 14:

IMPORTANT TAGS Professional Guru Paragraphs: For paragraph we use p tag. Note that closing this tag is optional but its good to have the opening and closing tag. Ex: p Hello i am a text inside paragraph/p . Note that paragraph is a block level tag. Links: To display a link we use the a tag. Ex: a href “ ”Click to Google/a.

slide 15:

Professional Guru Here href is the source of the link. Notice that we have added a property to the tag using a href keyword. We call these properties as attributes. b is for making text bold i is for making text italic em for emphasizing a text and u is for underline. img tag is used to display an image. Note that it is a self closing tag. Means we dont need to close it. For img tag we have attributes namely width and height to adjust the height and width of the image. Let’ s create a snippet of code to display an image with a link and some text formatting IMPORTANT TAGS

slide 16:

Professional Guru Create a file with the name mypage.html and write the code below. To add a comment enclose the comment like this -- this is a comment→ DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" html       head              titleThis is the title/title       /head    body           p I am text inside a paragraph/p           em I am a emphasized comment and see the two line break below me/em           br/           iI will be italicised/i  premaintains the content written as such /pre                   uI will have an underline/u                   img src “myimage.jpg” width “200” height “150”                   hr/                   a href “”Google me/a                   -- I am a comment and will not be visible in the page →                   h1 I am the bigges heading/h1                   h2 I am the smaller heading/h2                   h6 I am the smalles heading/h6      /body /html TRY  EXAMPLE

slide 17:

Professional Guru HTML table can be considered as group of rows where each of them contains a group of cells. A table can be created using the below tags table element which acts as main container tr element which acts as row container td element which defines a single cell. Lets look at an example of creating table in the next slide CREATE TABLES table      tr          tdCell 1/td          tdCell 2/td          tdCell 3/td       /tr       tr           tdCell 4/td           tdCell 5/td           tdCell 6/td       /tr /table

slide 18:

Professional Guru LISTS OL TYPE"1"      LI Item one /LI      LI Item two /LI      OL TYPE"I"             LI Sublist item No one /LI             LI Sublist item No two /LI             OL TYPE"i"                        LI Sub-sublist item No one /LI                        LI Sub-sublist item No two /LI             /OL       /OL /OL UL     LI Item One /LI     LI Item Two /LI     UL TYPE"circle"            LI Item Three /LI            LI Item Four /LI            UL TYPE"square"                   LI Item Five /LI                   LI Item Six/LI            /UL      /UL /UL Ordered Lists Unordered Lists

slide 19:

Professional Guru HTML FORMS Forms are used to enter data and send the data to the server. Lets have a look at a simple form example. form name “myform.html” action “submit.php” method “GET” First Name input type “text” name “first name”  input type “submit” value “submit me” name “submit” /form In the above example we have a form tag. The attribute name represents name of the form tag action represent the page to which the form data is sent and method represent the way of data transfer. We have GET and POST methods. Inside the form tag we have nested the input tag which creates a text box . Again the input tag needs to have a name and type attribute to represent name and type respectively. Then we have the input with type as submit which creates a submit button. Now go ahead and write this form to test it yourself.

slide 20:

Professional Guru INPUT TYPES There are many input types available for forms. Some important input types are text input text area select checkbox and radio buttons. input        a. text      b. password      c. radio      d. checkbox      e. submit      f. reset select textarea button We will cover these in our code section.

slide 21:

Professional Guru META TAGS                                  Metadata is information about data. The meta tag is kept inside the head element. The meta tag provides metadata about the HTML document. Metadata is not be displayed on the web page. It is used to provide information about data to browsers web services and search Engines Meta elements are typically used to specify page description keywords and other metadata.

slide 22:

Professional Guru DIV TAGS The div tag defines a section of a web page. It is a block level tag. You can use the DIV element to divide our web page into sections and to give properties to the content using CSSwe will discuss about CSS in the next section Example: div pThis is a paragraph/p /div

slide 23:

Professional Guru SPAN TAGS Span tag is similar to div tag but its a inline tag which means the content will not go to next line if we classify it using span tag. The main use of span tag is to add properties to a content using CSS. Thank  You

authorStream Live Help