HTML Tutorial PDF

CHAPTER - 2 HTML (Hypertext Markup language)  HTML (Hypertext + Markup language)  Hypertext: is a text which contains links to other texts that the reader can immediately access  A Markup Language: is a language that uses ‘markup tags’ to define the structure and presentatio...

CHAPTER - 2 HTML (Hypertext Markup language)  HTML (Hypertext + Markup language)  Hypertext: is a text which contains links to other texts that the reader can immediately access  A Markup Language: is a language that uses ‘markup tags’ to define the structure and presentation of content on a web page.  HTML - is the standard markup language for creating Web pages  Most websites are written in HTML.  Describes the structure and layout of web pages using elements or tags o HTML elements tell the browser how to display the content o Label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.  Displays the content of these pages through a web browser.  Tags and Attributes? Both are the basis of HTML. They work together but perform different functions.  HTML Tags  Tags are letters or words used to format content of a web page by holding the content between them.  Example: web design and development o Most of the tags have their corresponding closing tags, and must be closed in order to function.  Few tags like , and don't need to be closed. These are known as void elements.  Cont.…  HTML Attributes  Attributes are additional pieces of information placed inside the opening tag.  All attributes are made up of two parts − a name and a value  Example: web design and development By default it was aligned to left  In this instance, align is attribute of the tag.  Cont.…  Points To Remember  HTML is Not Case Sensitive, o HTML tags are not case sensitive: means the same as.  The vast majority of tags must be opened () and closed () with the element information between the tags.  Never Skip the End Tag, even though some HTML elements display correctly, with out it o And when using multiple tags, the tags must be closed in the order in which they were opened  Example: This is really important!  HTML Structure  What you need ? … HTML editor (Sublime Text editor, Notepad ++ or other ….) Web browser ( to preview your upcoming creation )  Cont.…  Basic building blocks o This specifies the language you write on the page. o Itis useful to the web browser to understand the version of the HTML used in the document o Example: In this case, the language is HTML 5 o Itmust only appear once, at the top of the page (before any HTML tags). o The declaration is not case sensitive.  Cont.… - This element encloses the complete HTML document - Contains meta information about the HTML page o stuff mostly meant for search engines and other computer programs. - Specifies a title for the HTML page. used inside the tag. - This is where the content of the page goes.  The content inside the section will be displayed in a browser.  The content inside the element will be shown in the browser's title bar or in the page's tab.  Cont.…  Example: Hello, World! This is a heading Hello World!  When you save it you can use either.htm or.html as file extension. There is no difference.  Cont.…  We can put metadata (additional important information about a document) inside the tag o The tag is where information about the document is stored. character encoding, name (page context), description. does not have a closing tag but it carries information within its attributes. o You can include one or more meta tags in your document based on what information you want to keep in your document  Cont.…  tag  To specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose. o  To refresh your web page automatically. o  To redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds. o  Cont.…  Example: My First Webpage ◦ Meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.  Adding Content  The HTML is where we add the content  This includes text, images, tables, forms and everything else that we see on the internet each day.  HTML Headings  HTML has six levels of headings, which use the elements , , , , , and  While displaying any heading, browser adds one line before and one line after that heading. This is heading 1 This is heading 2  Cont.…  Paragraph Tag  The tag offers a way to structure your text into different paragraphs.  A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.  Each paragraph of text should go in between an opening and a closing tag as shown below in the example Here is a first paragraph Here is a second paragraph  Cont.…  Line Break Tag  The tag inserts a single line break  element - anything following it starts from the next line.  The tag is an empty tag which means that it has no end tag.  Cont.…  Centering Content  You can use tag to put any content in the center of the page or any table cell. This text is in the center.  Horizontal Lines  Horizontal lines are used to visually break-up sections of a document.  The tag creates a line from the current position in the document to the right margin and breaks the line accordingly.  For example: you may want to give a line between two paragraphs Here is a first paragraph of text. Here is a second paragraph of text.  Cont.…  Anchor Tag  Used to create links in our page  link does not have to be text. A link can be an image or any other HTML element!  Syntax: link text  Example o Tutorial link  By default, links will appear as follows in all browsers: o An unvisited link - is underlined and blue o A visited link - is underlined and purple o An active link - is underlined and red  Cont.…  The target Attribute: Specifies where to open the linked document. o By default, the linked page will be displayed in the current browser window. _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab Tutorial link  Cont.…  Absolute URLs vs. Relative URLs  Absolute URL -- is the full URL to a file. E.g. using a full web address in the href attribute.  Relative URL -- points to a file relative to the current page. E.g. used to create a local link among our pages (a link to a page within the same website). -- is specified with a (without the "https://www" part):  Example Click to view //file2.html located in the same folder as the current page Click to view //file2.html located in the new folder in the current folder Click to view //file2.html located in the new folder at the root of the current web Click to view  Cont.…  Image Tag  tag is used to embed an image in a web page.  It does not have a closing tag.  It has two required attributes: o src - Specifies the path to the image o alt - Specifies an alternate text for the image  Syntax:  To specify the width and height of an image you can use the width and height attributes: o Always define the width and height of the image in pixels.  Example:  Cont.…  Preformatted tag  tag - used our text to follow the exact format of how it is written in the HTML document.  Any text between the opening tag and the closing tag will preserve the formatting of the source document. function testFunction( strText ){ alert (strText) }  Cont.…  Nonbreaking Spaces  Tells the browser not to split the text you like across two lines  Example: "Be yourself, everyone else is already taken"  In this cases, you should use a nonbreaking space entity   instead of a normal space. Be yourself, everyone else is already  taken Be yourself, everyone else is already  taken Be yourself, everyone else is already  taken  Cont.…  HTML Comments  HTML comments are not displayed in the browser, but they can help document your HTML source code  Syntax :  Comments can be used to hide content. Everything between the will be hidden from the display. o helpful if you want to hide content temporarily.  Cont.…  HTML for Quotations  element defines a section that is quoted from another source.  Browsers usually indent elements. For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.  Cont.…  HTML for Short Quotations  HTML tag defines a short quotation.  Browsers normally insert quotation marks around the quotation  Example: WWF's goal is to: Build a future where people live in harmony with nature.  HTML for Abbreviations  tag show description for an abbreviation or an acronym, like "HTML", "Mr.", "Dr.", "ASAP", "ATM".  when you mouse over the element.  Example: The WHO was founded in 1948.  Cont.…  HTML for Bi-Directional Override  The HTML tag is used to override the current text direction:  Example: This text will be written from right to leftYourself  Cont.…  HTML Text Formatting Element Meaning Purpose Bold Highlight important information Strong Similarly to bold, to highlight key text Italic To denote text Emphasised Usually used as image captions Text Marked Text Highlight the background of the text Small Text To shrink the text Striked Out Text To place a horizontal line across the text Underlined Text Used for links or text highlights Inserted Text Displayed with an underline to show an inserted text  Cont.…  HTML Table  HTML tables allow you to arrange data into rows and columns. o Commonly used to display tabular data like product listings, customer's details, financial reports, and so on. o A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc  Table Rows: are created using a tag and ends with a. o And to create columns inside a row you can use the elements o Each table cell is defined by a and a tag.  Table Headers: your cells to be table header cells use the tag instead of the tag:  Cont.…  Example Name Age Sex Abebe 23 Male  Cont.…  Tables do not have any borders by default.  You can use the CSS border property to add borders to the tables.  Also, table cells are sized just large enough to fit the contents by default. o To add more space around the content in the table cells you can use the CSS padding property. o The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells. table, th, td { border: 1px solid black; } th, td { text-align: left; padding: 10px; }  Cont.…  Example table, th, td Name { Age border: 1px solid black; Sex border-collapse: collapse; } Abebe 23 Male  By default, borders around the table and their cells are separated from each other. o But you can collapse them into one by using the border-collapse property on the element.  Cont.…  Or we can add the style the tag inside each tag Name Age Sex Abebe 23 Male  Cont.…  Style Table headers background o th { background-color: #96D4D4; }  Round Table Borders o table, th, td { border: 1px solid black; border-radius: 10px; }  Dotted Table Borders o table, th, td { border-style: dotted; } dotted, dashed, solid, inset, ridge …  Border Color o th, td { border-color: #96D4D4; }  Cont.…  HTML Table Sizes  HTML tables can have different sizes for each column, row or the entire table.  Use the style attribute with the width or height properties to specify the size of a table, row or column.  E.g. Displays a radio button (for selecting one of many choices) choices) Displays a choose file button to select a file Displays a submit button (for submitting the form)