HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, images and more. Tags are surrounded by angle brackets and most have an opening and closing tag. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables. HTML documents require a <DOCTYPE> declaration and have a basic structure with <html>, <head>, and <body> tags.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 ratings0% found this document useful (0 votes)
34 views36 pages
Internet Programming (HTML)
HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, images and more. Tags are surrounded by angle brackets and most have an opening and closing tag. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables. HTML documents require a <DOCTYPE> declaration and have a basic structure with <html>, <head>, and <body> tags.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36
Internet Programming
HTML
BEIMNET G. HTML Stands for Hyper text markup language A Markup language is used to markup content and is composed of several tags. Tags are instructions that are embedded directly into the text of a document and tell the browser how to display the document HTML, XHTML, XML are all markup languages. HTML is the most widely used language on Web to develop web pages HTML is being widely used to format web pages with the help of different tags available in HTML language. It should have .htm or .html file name extension and can be created using a simple text editor HTML Tags are enclosed in < and > There are two types of tags Start tag format: <tag_name> End tag format: </tag_name> Ex: <p> this is paragraph one </p> Some tags may not have end tags (a.k.a empty tags) E.g. <br/> Tags are not case sensitive HTML Tags Tags can have attributes used to add additional information to the tags added in the opening tag defined as a name-value pair attributes are separated from each other by a space ◦ <body bgcolor=“red" text=“white“ > HTML Elements Refer to the opening tag, closing tag and the content inside these tags. <h1> This is a header </h1> Every HTML element has a default display value depending on what type of element it is. 2 default display types of elements: Inline Elements and Block Elements Block Level Elements: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples of block-level elements: <div>, <h1> - <h6>, <p>, <form> Inline Elements: An inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: <span>, <a> & <img> HTML versions HTML Document Type Declaration Is used to indicate the type of markup language used in the document Doctype for HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN”“http://www.w3.org/TR/html4/strict.dtd”> Doctype for XHTML: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd”> Doctype for HTML5: <!DOCTYPE html> HTML – document structure HTML Tags <html> - Every other HTML tag and content of an HTML document should be defined within the <html> &</html> tags <head> - Contains information which is not displayed in the browser display area and can contain tags like <meta> <script> <style> <title>
format: <head>…</head> <title> - Sets the title of the web page to be displayed in the browser’s title bar defined within the <head> tag format: <title>…</title> HTML Tags <body> -contains the visible part of the web page, displayed in the display area of the browser, contains several other tags and content in it. format: <body>…</body> Some attributes of the body tag are: ◦ bgcolor=“color” , used to change background color of a web page ◦ background=“img url” , used to set background image to a web page ◦ text=“text color” , it changes the body text color HTML Tags: Headings and Paragraphs Heading Tags (h1-h6)
Paragraph Tag HTML Tags: Text Formatting Tags Text formatting tags modify the text between the opening tag and the closing tag. HTML Tags: Inserting Images The <img> tag is used to insert images.
The tag can have attributes:
◦ src- Location of image file (relative or absolute) ◦ Alt- Substitute text for display (e.g. in text mode) ◦ Height- Number of pixels of the height ◦ width - Number of pixels of the width ◦ Border- size of the border, 0 for no border. HTML Tags: Anchor Tag <a>…. </a> Used to define a hyperlink Used for navigation within a website Link to an external website Has a target attribute which takes the value _blank to open links in a new window or _self to open links in the same window. Link to an e-mail address Link to another location in the same document Link to a specific location in another document HTML Tags- Anchor Tag HTML Tags: Lists Ordered Lists- <ol> </ol> defines the list, - each list item is defined in a <li></li> tag - has an attribute called type that takes values a, A, I, i, or 1 Unordered Lists- <ul> </ul> defines the list, - each list item is defined in a <li></li> tag - has an attribute called type that takes values disc, circle or square Definition Lists- <dl> </dl> defines the list of texts and associated definitions. - <dt> </dt> contains the text to be defined. - <dd> </dd> contains the definition. HTML Tags: Tables A table consists of one or more rows and each row has one or more columns. <table> </table> begins and ends a table <tr> </tr> creates a table row <td> </td> written in the <tr> tag it creates a data cell. <th> </th> can be used to define a table row that is a header. Tables have attributes: ◦ Border- used to define the size of the table border. ◦ Cellspacing- used to define the empty space between cells. ◦ Cellpadding- used to define the empty space inside the cells. ◦ Colspan- used to merge cells across columns, defines how many columns a cell occupies ◦ Rowspan- used to merge cells across rows, defines how many rows a cell occupies HTML Special Characters Additional Tags <hr/>- adds a horizontal line( divider)
<br/>- used to jump to the next line.
<!-- comments -->
HTML Forms Used to interact with users and collect user input. Has various input elements such as text field, checkboxes, drop- down menus, buttons … The <form> tag is used to create and html form. <form> <!– form elements--> </form> HTML Form Can have attributes like: Action- defines the action to be performed. Specifies the backend script that processes the data. Method- defines the method used to upload the data. Usually GET or POST. Get is the default. Target- specifies where to display the response that is received after form submission. Can have values like: _blank, _self, _parent, _top, framename Autocomplete- specifies is autocomplete should be on or off <form action=‘/mybackend.php’ method=‘GET’ target=‘_self’> <!– form elements--> </form> HTML Form- Method Attribute GET Post Data is sent as part of the request URL Data is sent in the HTTP message body of a POST request. Used for non-secure data Used for large and secure data The length of a URL is limited (2048 characters) No data size restriction Request exists in browser history and can be Won’t exist in browser history and can’t be bookmarked bookmarked. /test/demo_form.asp? POST /test/demo_form.asp HTTP/1.1 name1=value1&name2=value2 Host: w3schools.com
name1=value1&name2=value2 HTML Form: Input Element Most used form elements. Can be displayed in various ways depending on the type attribute. Type can have values like text, radio, checkbox, submit, button, file, password … Input tags have common attributes like: name, type, value Example: HTML Form: Input Types text –for a text field hidden – a hidden field for storing values, not visible password – password input box file – input box for file uploading (browse) submit – a button that submits the form reset – a button that resets form fields to their original values button – a general purpose button checkbox – a check box radio – a radio button (option button) image – an image button that submits the form HTML Form: other elements Select and option – drop down menu
Textarea- a multiline text area field.
HTML Form: labels Form labels are used to associate an explanatory text to a form field using the field's ID. HTML Forms: Fieldsets Are used to enclose a set of related form input controls. Has an associated legend tag that is used to set the title.
Note: Read about additional Input control types such as email, search, url, number, range, date … Common Tag Attributes: ID is used uniquely identify one element for the purposes of scripting, styling, or addressing. Each element can have only one ID Any html element can have an ID attribute Naming rules: Must contain at least one character & must not contain any space characters. Common Tag Attributes: Class Is used for identifying group of elements for the purposes of scripting, styling, or addressing. Classes are NOT unique You can use the same class on multiple elements and use multiple classes on the same element. To specify multiple classes, separate the class names with a space.
This element belongs to classes left and form-input.
Naming Rules: must begin with a letter and can be followed by letters, numbers, underscores or hyphens. Grouping Tags The div and span tags are one of the most common grouping (wrapping) tags. Are container tags that are not visible. <div> is a block level element used as a container for other HTML elements. <span> is an inline element used as a container for texts. With CSS they are used to style contents. Div is also used for layout purposed together with css. Semantic vs Non-semantic Tags Semantic elements are elements with meaning. It clearly describes it’s use to both the browser and the developer. Eg: form, table, img Non-semantic elements have tags that don’t convey any particular meaning. Eg: div, span In HTML5, new semantic elements are provided to define different parts of a webpage. Non-Semantic Tags Semantic Tags HTML Multimedia Tags Pictures, Sound, Video, Animations…. <audio> /<source> : used to embed audio clips <video> /<source>: used to embed video clips HTML Charset To display an HTML page correctly, we should specify the character set (character encoding) we’re using to the browser. This is specified in the meta tag (found in the head section). Currently we used UTF-8 (Unicode) that covers almost all of the possible characters and symbols in the world. Reading Assignment New HTML5 input elements and attributes. HTML Frames HTML5 graphic elements: svg and canvas
