HTML.pdf

USCS306: Web Technology UNIT- I Chapter-1: What is HTML? HTML stands for Hyper Text Markup Language. HTML is the code that is used to structure a web page and its content. The component used to design the structure of websites are called HTML tags. HTML file must hav...

USCS306: Web Technology UNIT- I Chapter-1: What is HTML? HTML stands for Hyper Text Markup Language. HTML is the code that is used to structure a web page and its content. The component used to design the structure of websites are called HTML tags. HTML file must have an htm or html file extension. HTML is also NOT case sensitive. That means, you can use either lowercase or uppercase. HTML HTML CSS JavaScript Structure/Layout Style Logic Basic Structure of an HTML Web Page Web page we see on a browser is divided into 2 types: 1. Head: The head portion of a web contains the title of a web page, CSS style definition that defines the look of the web page. It is part of the document’s structure but is not displayed on the webpage. 2. Body: The body of a web page contains the content displayed on the web page. Basi c H T M L Pa g e te l l s version of html html root element section contains metadata (like the page title). My Fi rs t Page page ti t l e container f o r a l l visible content hello world paragraph tag HTML Tags and Element The component used to design the structure of websites are called HTML tags. The HTML element is everything from the start tag to the end tag 2 types of tags: Pair/Container type: has opening and closing tag. Eg: Standalone/Empty type: only has opening tag. Eg: This is a heading Content Element Comments in HTML: It is used for inserting comments in the HTML code. Using comments, especially in complex code. Syntax of HTML Comments: 1) comments: 2) Using comment tag: NOT. Works only with Internet Explorer. Code -1 Muffins Muffins, the early years Hi. My name is Muffins. I am a mighty cat. I was adopted by my family when I was only three weeks old. HTML Head tag HTML tag Usage Example HTML title element is used to specify the title of HTML Page the web page. HTML style element can be used to define the style of your HTML page using CSS. p {color:blue;} HTML link element can be used to link external The script tag is used to embed a client-side script (JavaScript). The tag defines metadata about an about data. Common body tags element 1. : the tag can be used to define a paragraph in an HTML page. 2. : Used to display headings in HTML. HTML has 6 levels of headings ranging from to. 3. :Used to add next line(line breaks) to your page. 4. :Used to display a horizontal ruler, used to separate content. Code-2 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 This is a paragraph. To force line breaks in a text, use the br element. HTML Attributes All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value“ Eg: Organizing text HTML Organizing text refers to proper placement of all HTML Tags. There are two display values: block and inline A block-level element always starts on a new line and takes up the full width available An inline element does not start on a new line and it only takes up as much width as necessary Formatting text HTML Fo r m a tt i n g elements were designed t o display special ty p e s o f text: -Header t e x t - T h e r e ar e 6 ty pe s o f H T M L heading - Bol d t ex t - Important t e x t - Ital ic t ex t - under l ine t ex t - E mphasiz ed t ex t - Subscript t e x t - Super scr ipt t ex t - Marked t e x t - Smal le r t e x t - Deleted t e x t - used to insert new text. Code-3 I am Happy. I am Happy. I am Happy. I am Happy. I am Happy. I am Happy. I am Happy. I am Happy. This is inserted text You have to hurry up!  TAG The tag defines preformatted text. The text will be displayed exactly as written in the HTML source code. The pre element Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks DIV Tag: it is used to differentiate sections of a web page. div {background-color: lightblue;} This is a heading in a div element This is some text in a div element. This is a heading in a div element This is some text in a div element. SPAN Tag: it is used to differentiate a word or group of words from the web page. The span element My mother has blue eyes and my father has dark green eyes. Lists tag HTML list provide an easy method to create steps or summarize large data into smaller key points. Unordered list : An unordered list starts with the tag. Each list item starts with the tag. Attribute used:  Type: Type attribute defines which type of symbol to be used to represent list of data element.  Value of this tag can be given as "circle/square/filled circle". Lists tag Ordered list: An ordered list starts with the tag. Each list item starts with the tag. Attribute used:  Type: Type attribute defines which type of numbering format to be used to represent list of data element.  Value of this tag can be given as "A/a/1/i/I" Lists tag Description list: This lists contains list items with its description mentioned alongside it. These lists can be defined using the tag. Each list item title is defined using the tag and its description using the tag. Nested Lists in HTML In HTML if you want to create sub topics you can nest lists. The nested list can be created by defining sub topic list inside the main list in HTML code. Links in HTML Hyperlinks are used to facilitate quick access to other web pages or other sections on the same web page. You can click on a link to switch to another HTML page. A link is specified using the called as anchor tag. Anything between the opening and closing tag becomes part of the link. Attributes include:  href  target: specify where to display the contents. 1. If set to "_blank" then a new window will be opened. 2. If set to "_self" then loads the new page in current window.  Images on web page The tag is it contains attributes only, and does not have a closing tag. The tag has two required attributes: 1. src - Specifies the path to the image 2. alt - Specifies an alternate text for the image The width and height attributes always define the width and height of the image Images M a p  An image map is an image with clickable areas.  The areas are defined with one or more tags.  STEPS:  The image is inserted using the tag.  The only difference from other images is that you must add a usemap attribute.  The usemap value starts with a hash tag # followed by the name of the map, and is used to create a relationship between the image and the map. Then, add a element. The element is used to create an image map, and is linked to the image by using the required name attribute.  Then add a clickable area is defined using an element. And lastly add coords. Ta b l e s in H T M L A table can enable you to organize complex data in a manner which is simple, logical and easy to follow. A table is an arrangement of rows and columns. Row - is a horizontal specification of table. Column - is a vertical specification of table. tag = Table tag is used to create a table in a web page. content tags: ,, tags. tag = This tag is used to specify header in the table. tag = This tag is used to create a row in the table. tag = This tag is used to create a data cell in the table. How To Add a Border When you add a border to a table, you also add borders around each table cell. To add a border, use the CSS border property on table , th, and td tag. i.e border: 1px solid black or use border=2; To avoid having double borders use border-collapse: collapse; Cell spacing and padding HTML tables can adjust the padding inside the cells, and also the space between the cells. Cell padding is the space between the cell edges and the cell content Cell spacing is the space between each cell. HTML Table Colspan and Rowspan To make a cell span over multiple columns, use the colspan attribute. Note: The value of the colspan attribute represents the number of columns to span. To make a cell span over multiple rows, use the rowspan attribute. Note: The value of the rowspan attribute represents the number of rows to span. Colors in HTML HTML colors are specified with predefined color names, or with RGB, HEX, RGBA values. In HTML, a color can be specified by using a color name. An RGB color value represents RED, GREEN, and BLUE light sources. In HTML, a color can be specified as an RGB value, using this formula: rgb(red, green, blue) In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all) H t m l m u ltimedia basics. multimedia drives from 2 words first multi means many and second media means tools i.e used to represent or do certain things. basic example is text, graphic, voice, images, music and etc. tag is used for display video in web page. attribute: 1. height= defines the vertical length of a window in whcih video is going to play. 2. width=defines the horizontal length of a window in whcih video is going to play. 3. src= define the path or location of a video which we want to play. 4.controls=like play,pause,forward,backward etc of the video. 5.autoplay=start playing video as soon as browser opens a web page. H t m l m u ltimedia basics. tag is used to provide number of sources of audio/videos to browser attribute: 1. src=define location of the video. 2.type=defines type of content specified in source tag like audio/video. syntax = < source src= “ ” type="video/mp4"> H t m l m u ltimedia basics. Audio t a g is used t o p l ay audio/background music in web page. attribute: 1.src 2.controls ta g is used t o provide number o f sources o f audio/video t o browser. Interactive Elements The tag specifies additional details that the user can open and close on demand. By default, it is closed. When open, it expands, and displays the content within. Forms A form is one of a interactive way to take input from the user. is used to gather the information from the user like preferences, comments, and etc. It is the collection of different input elements like text, password, checkbox, radio-button, submit buttons and etc. Attribute used: 1. Action=location of the script where data is going to be process after all data is submitted by user. 2. method:2 values: a.get=This method attach all the data to the URL and send all data in one transaction. b.post=This method will establish a connection with the server then submit data once connection is made. Forms T h e t a g d e f i n e s a l a b e l f o r m a ny f o r m elements. T h e e l e m e n t is u s e f u l f o r s c r e e n - r e a d e r users, because t h e s cre e n - r e a d e r w i l l r e a d o u t l o u d t h e l a b e l when t h e u s e r f o c u s on t h e i npu t element. T h e f o r a t t r i b u t e o f t h e t a g s h ou l d be e q u a l t o t h e id a t t r i b u t e o f t h e el em e n t t o bind the m together. T h e H T M L e l e m e n t is t h e m os t used f o r m element. A n el em e n t ca n be d i s p l ay e d in m a ny ways, depending on t h e t y p e a tt r i b u t e. Forms Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.