Html starting
Download as PPTX, PDF3 likes1,259 views
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <html> and <body> to mark elements in a web page like headings, paragraphs, links, images, and forms. Key HTML elements include headings, paragraphs, links, images, lists, tables, and forms. HTML documents are made up of these basic building blocks and contain HTML tags and plain text.
Html starting
- 1. What is HTML ? HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
- 2. Versions of HTML HTML 2.0 : Some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes. HTML 3.0 : Upgrade the features and utility of HTML. However, it was never completed or implemented. HTML 3.2 : Support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details. HTML 4 : It includes support for most of the proprietary extensions, plus support Cascading enhancements). for extra features (Internationalized documents, support for Style Sheets, extra TABLE, FORM, and JavaScript HTML 5 : The <canvas> element for 2D drawing,<video>,<audio> & some extra email, features support like New form controls, like calendar, date, time, url, search.
- 3. HTML Elements HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.
- 4. HTML Elements.. Explanation of the above code: The <!DOCTYPE... > element tells the browser which version of HTML the document is using. The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag). The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS),although the <title> tag is an exception to this. The content of the "<title>" tag is displayed in the browser's title bar (right at the very top of the browser). The <Body> tag is the main area for your content. This is where most of your code (and viewable elements) will go. The <P> tag declares a paragraph. This contains the body text.
- 5. HTML Tags HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags • <tagname>content</tagname>
- 6. HTML Formatting There are some common formatting tags are here below (1) (2) (3) (4) (5) (6) (7) (8) Headings(<h1>,<h2>,…<h6>) Strong (<strong>) Emphasis (<em>) Line Bracks (<br/>) Horizontal rule (<hr>) Unordered List (<ul>) Ordered List (<ol>) List Item (<li>)
- 7. Heading Tags • There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from <h1> for the most important to <h6> for the least important.
- 8. Strong & Emphasis • To place a strong importance on a piece of text, use the <strong> element. • You can place an emphasis on text by using the <em> element.
- 9. Line Breaks & Horizontal Rule • You can force a line break by using the <br> element. • You can create a horizontal rule by using the <hr> element.
- 10. Unordered & Ordered List • To create an unordered list, use the <ul> element to define the list, and the <li> element for each list item. • To create an ordered list, use the <ol> element to define the list, and the <li> element for each list item.
- 11. HTML Colors • In HTML, colors can be added by using the style attribute. You can specify a color by its name (e.g., blue), its hexadecimal value (e.g., #0000ff), RGB value (e.g. rgb(0,0,255)), or its HSL value (e.g. hsl(240,100%,100%)). Foreground Color : To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example: <h3 style="color: blue">HTML Colors</h3> Background Color : To add a background color to an HTML element, you use style="backgroundcolor:{color}", where {color} is the color value. For example: <h3 style="background-color: orange">HTML Colors</h3>
- 12. HTML Colors Border Color : To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example: <h3 style="border:1px blue solid;">HTML Colors</h3> Transparency : You can also use alpha to specify the level of opacity the color should have. This is only available on RGB and HSL notations. To do this, add the letter "a" to the functional notation (i.e. RGBA and HSLA). For example, rgba(0,0,255,0.5) results in a semi-transparent blue, as does hsla(240, 100%, 50%, 0.5). For example: <h3 style="background-color:rgba(0,0,255,1)">No transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.5)">Half transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.1)">Lots of transparancy</h3>
- 13. HTML Links Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor element. To create a hyperlink, you use the <a> tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to. Example:
- 14. Links Targets You can nominate whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target="_blank" opens the URL in a new window. Example: Search your item <a href="http://www.google.com" target="_blank" >Google search</a>
- 15. Basic of Table In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts.
- 16. Table with colspan You can use the colspan attribute to make a cell span multiple columns.
- 17. Table with Rowspan Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).
- 18. Table with Color Background-color is use for background of table. And color use for font color.
- 19. HTML Image Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page. To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. The <img> element above contains a number of attributes. Like : src,width,height,alt …
- 20. Image Links You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.
- 21. HTML Form • HTML Forms are required when you want to collect some data from the site visitor. For example registration information: name, email address, credit card, etc. • A form will take input from the site visitor and then will post your back-end application such as CGI, ASP Script or PHP script etc. Then your back-end application will do required processing on that data in whatever way you like. • Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user. • In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.
- 22. Input Tag Text : Text fields are used for when you want the user to type text or numbers into the form. Select List : A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options. The select list is created using the <select> element in conjunction with the <option> element. <select> <option value ="sydney">Sunday</option> <option value ="melbourne">Monday</option> <option value ="cromwell">Tuesday</option> <option value ="queenstown">Wednesday</option> </select>
- 23. Input Tag.. Checkbox: Checkboxes are similar to radio buttons, but enable the user to make multiple selections. Submit : The submit button allows the user to actually submit the form.
- 24. Input Tag.. Radio Button: Radio buttons are used for when you want the user to select one option from a pre-determined set of options.
- 25. Form Action.. Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.