SIA HTML.pdf

What is HTML? HTML is the standard markup language for creating Web pages. - HTML stands for Hyper Text Markup Language. - HTML was invented by Berners-Lee. - HTML elements are the building blocks of HTML pages. - HTML describes the structure of a Web page - HTML elements l...

What is HTML? HTML is the standard markup language for creating Web pages. - HTML stands for Hyper Text Markup Language. - HTML was invented by Berners-Lee. - HTML elements are the building blocks of HTML pages. - HTML describes the structure of a Web page - HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Versions: Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 HTML Editors: Notepad Notepad++ SubLime Text NetBeans Visual Studio etc… Browsers: Google Chrome Mozilla Firefox Opera Internet Explorer Microsoft Edge Safari etc… HTML Tags: - There are two types of tags.. Container Tag / Pair Tag Singular Tag / Unpair Tag HTML Syntax: content goes here... - HTML tags normally come in pairs like and. - 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, but with a forward slash inserted before the tag name. HTML Structure: Page Title My First Heading My first paragraph.< /p> The declaration defines that this document is an HTML5 document The element is the root element of an HTML page The element contains meta information about the HTML page The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The element defines a large heading The element defines a paragraph 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" - Always use lowercase character in attributes name - Always attribute values in quote  Page Title My First Heading My first paragraph. HTML Headings Tag: - HTML headings are titles or subtitles that you want to display on a webpage. - HTML headings are defined with the to tags. - defines the most important heading. defines the least important heading. - px = pixels. - Rules: - tag should be used one time on a web page. - to tag could be used multiple times on a web page. - Browser chrome always shows font size, width, height & many more. properties in em or rem (1em = 16px, 1rem=16px). Syntax: add tips for any Heading tags align=“center|left|right” => align text left, right or center in a page > X=1,2,3,4,5,6 Example:  Page Title Skywin It Academy Skywin It Academy Skywin It Academy Skywin It Academy Skywin It Academy Skywin It Academy Font Size in Heading Tag: Tag Font Size Normal Text 16px (Times New Roman) 32px 24px 18px 16px 13px 10px HTML Tag: - The tag defines a paragraph. - Browsers automatically add a single blank line before and after each element. Example:  Page Title The Main Languages of the Web Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta felis sapien, non congue nisl varius quis. Cras maximus, dolor vitae scelerisque sollicitudin, ligula erat semper eros, ac iaculis nisl nulla nec elit. Sed ac est non nunc viverra ultricies eu et erat. Morbi id mauris quis enim commodo condimentum vel ut sem. HTML Tag: - The tag is known as Division tag. - The tag is used in HTML to make divisions of content in the web page. - tag has both open and closing tag and it is mandatory to close the tag. - As we know tag is block-level tag, the div tag contains the entire width. Hence, every tag will start from a new line - The tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once. Example: Page Title Skywin IT Academy Skywin IT Academy in Surat  Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement HTML Tag: - HTML tag is used as a generic container of inline elements. - The tag is a paired tag means it has both open and closing tags, and it is mandatory to close the tag. - It is used for styling purposes to the grouped inline elements (using class and id attribute or inline style). - Note: HTML is much similar to tag, but is used for block-level elements and tag is used for inline elements. - The tag can be useful for the following task: To change the color, font, background of a part of text using CSS To apply the scripts to the particular part of the text. Example: Page Title Skywin IT Academy Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement HTML Comments: - HTML comments are not displayed in the browser. - With comments you can place notifications and reminders in your HTML code. - Comments can be used to hide content. - This can be helpful if you hide content temporarily. - You can also hide more than one line. Everything between the will be hidden from the display. Syntax: HTML Tag: => Break Row - The tag inserts a single line break. - The tag is useful for writing addresses or poems. - The tag is an empty tag which means that it has no end tag so it is called an unpaired tag. - Use the tag to enter line breaks, not to add space between paragraphs. - Note: Most of developer written tag as Example:. Page Title Be not afraid of greatness. Some are born great, some achieve greatness,  and others have greatness thrust upon them. HTML Formatting Elements: - Bold text - Important text - Italic text - Emphasized text - Underline text - Inserted text - Marked text - Small text - Large text - Strike Through text - Deleted text - Subscript text - Superscript text - Abbreviation text - Use the global title attribute to show the description for the abbreviation when you mouse over the element. Example: Page Title CSS Preformatted text  - The tag defines preformatted text. - tag has both open and closing tag and it is mandatory to close the tag. - Text in a element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code. - Note: &nbsp;(Nearby space) is using custom space without using tag. Example: Page Title Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks => Horizontal Rule - Use the tag to define thematic changes in the content. - The element is most often displayed as a horizontal rule that is used to separate content in an HTML page. Syntax: Height width=”Pixel or Percent” color=”color-name” >  Example: Page Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta felis sapien, non congue nisl varius quis. Cras maximus, dolor vitae scelerisque sollicitudin, ligula erat semper eros, ac iaculis nisl nulla nec elit. Sed ac est non nunc viverra ultricies eu et erat. Morbi id mauris quis enim commodo condimentum vel ut sem. Praesent sed sollicitudin nibh. In tincidunt nunc a nibh rutrum, ac ultricies dui pharetra. Proin pulvinar imperdiet accumsan. - The tag defines a hyperlink, which is used to link from one page to another. - The most important attribute of the element is the href attribute, which indicates the link's destination. - By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red Syntax:...  Example: Visit Skywin! - The tag is a container tag of HTML that is implemented for creating scrollable text or images within a web page from either left to right or top to bottom. Syntax:..... - behavior: Sets how the text is scrolled within the marquee. If no value is specified, the default value is scroll. - direction: Sets the direction of the scrolling within the marquee. If no value is specified, the default value is left. - loop: Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously. - width: Sets the width in pixels or percentage value. - height: Sets the height in pixels or percentage value. - bgcolor: Sets the background color through color name or hexadecimal value. - scrollamount: Sets the amount of scrolling at each interval in pixels. The default value is 6.  - scrolldelay: Sets the interval between each scroll movement in milliseconds. The default value is 85. Note: that any value smaller than 60 is ignored and the value 60 is used instead unless truespeed is specified. - vspace: Sets the vertical margin in pixels or percentage value. - hspace: Sets the horizontal margin in pixels or percentage value. Example: Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling HTML Media: - The tag is used to embed an image in an HTML page. - The tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed Syntax: Example: - The HTML element is used to show a video on a web page. Syntax: The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the and tags will only be displayed in browsers that do not support the element. To start a video automatically, use the autoplay attribute Add muted after autoplay to let your video start playing automatically (but muted) Note: Browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.  - The HTML element is used to play an audio file on a web page. Syntax: The controls attribute adds audio controls, like play, pause, and volume. The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the and tags will only be displayed in browsers that do not support the element. To start a audio automatically, use the autoplay attribute Add muted after autoplay to let your audio start playing automatically (but muted) Note: Browsers do not allow autoplay in most cases. However, muted autoplay is always allowed. - Iframe can be used to embed Youtube video & embed Google map to a webpage. Embed youtube video in iframe: - Youtube videos can be embedded into an iframe and published on a website. To embed a youtube video, follow these steps: 1. Open a youtube website. 2. Select your video. 3. Click the share button. 4. In the popup window, choose the Embed option. 5. Copy iframe code and paste on your html file in the editor. 6. Save the code and open it in the browser.  Embed Google Map in iframe: - Iframes are also used to embed google maps on a webpage. - This is a free service by Google Maps. To embed google maps in iframe, follow these steps: 1. Open Google Maps. 2. Search your address in the search bar. 3. Click the Left menu. 4. Choose share or embed map 5. In the popup window, choose Embed a map. 6. Copy iframe code and paste on your html file in the editor. 7. Save the code and open it in the browser. HTML Lists: - HTML lists are used to present list of information in a well-formed and semantic way. - There are Three Different Types of lists in HTML and each one has a specific purpose and meaning. Ordered list Unordered list Description list Ordered HTML List: - Used to create a list of related items, in a specific order. - An ordered list starts with the tag. Each list item starts with the tag. - The list items will be marked with numbers by default. Example: Coffee  Tea Milk The Type Attribute: The type attribute of the tag, defines the type of the list item marker: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Unordered HTML List: - Used to create a list of related items, in no particular order. - An unordered list starts with the tag. Each list item starts with the tag. - The list items will be marked with bullets (small black circles) by default Example: Coffee Tea Milk List Item Marker:  The type attribute of the tag, defines the type of the list item marker: Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked Description HTML Lists: - A description list is a list of terms, with a description of each term. - The tag defines the description list, the tag defines the term (name), and the tag describes each term Example: Coffee - Hot Coffee - Cold Coffee Tea Milk - Hot Milk - Cold Milk HTML Tables: - The tag defines an HTML table. - An HTML table consists of one element and one or more , , and elements. - The tag defines a Table Caption. - The element defines a Table Row. - The element defines a Table Header. - The element defines a Table Cell. Syntax:........ Syntax: ……… - To add a new row in a table we must use tag  Syntax: ……… - The text in elements are bold and centered. - Each table header is defined with a tag. Syntax:.... - Each table data/cell is defined with a tag. Syntax:... Colspan:  - The colspan attribute defines the number of columns a cell should span (or merge) horizontally. Rowspan: - The rowspan attribute specifies the number of rows a cell should span vertically. Example 1: Example 2: HTML Forms: - An HTML form is used to collect user input. - The user input is most often sent to a server for processing. Element: - The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. Syntax:. form elements. Method Attribute: - The method attribute specifies the HTTP method to be used when submitting the form data. GET : - Get method will DISPLAY all the information of the page into the URL. - Note: Some Browsers will note display information on URLs by GET… POST : - The POST method will HIDE all the information of the page into the URL. The default HTTP method when submitting form data is GET. HTML Elements: - The HTML element can contain one or more form elements. ★ - The element defines a label for several form elements. - The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element. Syntax: Content Label ★ - The HTML element is the most used form element. - An element can be displayed in many ways, depending on the type attribute. Syntax: HTML Input Types Type Description Displays a single-line text input field Displays a email box Displays text as a password  Displays a radio button (for selecting one of many choices) Displays a checkbox (for selecting zero or more of many choices) Displays a submit button (for submitting the form) Displays a clickable button Reset form controls Displays a color picker box Displays a date box Displays a time box Displays a number box Displays a range bar Displays a Choose File Button Note: name attribute value should be always the same. Example: Gender Male  Female Example: Hobby: music cricket eat playing  ★ - The element is used to create a drop-down list. - The element is most often used in a form, to collect user input. - The name attribute is needed to reference the form data after the form is submitted - The tags inside the element define the available options in the drop-down list. Syntax: Content Label List Item List Item List Item Example: City --Select Your City-- Surat Ahmedabad Vadodara Rajkot  ★ - The element defines a multi-line input field - The element is often used in a form, to collect user inputs like comments or reviews. - The size of a textarea is specified by the cols and rows attributes (or with CSS). - The rows attribute specifies the visible number of lines in a text area. - The cols attribute specifies the visible width of a text area. Syntax: Example: Address