More on HTML P R O F E S S O R S U L T A N A Start of an HTML Doc Typically start page named index html o The html extension is very important The DOCTYPE html declaration defines that this document is an HTML5 document The html element is the root element of an Uses tags startTagname closingTagname HTML page Should have the basic tags shown below when creating an html page The title element specifies a title for the HTML page which is shown in the browser s title bar or in the page s tab The body 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 h1 element defines a large heading The p element defines a paragraph https www w3schools com html html intro asp S A M P L E F O O T E R T E X T 2 DOCTYPE html html head title Page Title title head body body 1 1 2 2 2 0 2 4 html Heading Tags HTML headings are titles or subtitles that you want to display on a webpage HTML headings are defined with the h1 to h6 tags o h1 defines the most important heading h6 defines the least important heading https www w3schools com html html headings asp 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 3 Paragraph Tags Horizontal Rules Line Breaks The HTML p element defines a paragraph paragraph o A paragraph always starts on a new line and browsers automatically add some white space a margin before and after a The hr tag defines a thematic break in an HTML page and is most often displayed as a horizontal rule o The hr element is used to separate content or define a change in an HTML page The HTML br element defines a line break o Use br if you want a line break a new line without starting a new paragraph o The br tag is an empty tag which means that it has no end tag https www w3schools com html html paragraphs asp 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 4 The HTML style attribute is used to add styles to an element such as color font size and more Styles SIZE FONTS ALIGNMENT https www w3schools com html html styles asp 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 5 Styles with Multiple Attributes In order to include multiple attributes just add them within the quotes after each semicolon 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 6 Formatting b b Bold text strong strong Important text i i Italic text em em Emphasized text mark mark Marked text small small Smaller text del del Deleted text ins ins Inserted text sub sub Subscript text sup sup Superscript text 1 1 2 2 2 0 2 4 https www w3schools com html html formatting asp S A M P L E F O O T E R T E X T 7 Adding Links to a Page The HTML a tag defines a hyperlink It has the following syntax The most important attribute of the a element is the href attribute which indicates the link s destination The link text is the part that will be visible to the reader Clicking on the link text will send the reader to the specified URL address https www w3schools com html html links asp 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 8 Lists Unordered Lists o An unordered list starts with the ul tag Each list item starts with the li tag o The list items will be marked with bullets small black circles by default https www w3schools com html html lists asp Ordered Lists o An ordered list starts with the ol tag Each list item starts with the li tag o The list items will be marked with numbers by default 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 9 Adding an Image In general you should organize your html files For example you have a folder titled Webpage Inside that folder you have a file called index html Now add a folder titled images This folder will hold any pictures you want to add to your page Now upload whatver pictures you would like into this folder and when you reference images make sure you reference the direct path The img tag is empty it contains attributes only and does not have a closing tag The img tag has two required attributes o src Specifies the path to the image o alt Specifies an alternate text for the image The required alt attribute provides an alternate text for an image if the user for some reason cannot view it 1 1 2 2 2 0 2 4 https www w3schools com html html images asp S A M P L E F O O T E R T E X T 10 Jump from Sections using links 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 11 CSS Files 2 types First Type In line Styles 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 12 CSS Files 2 types Second Type must be referenced from your index html file folder Now let s add another folder called styles Going back to your directory structure inside your Webpage folder you currently have Index html and an images Inside this folder we will be adding any css styling sheets we would like to be reflected in the webpage o File will be called styles css can add the following inside the folder 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 13 Why is the structure different 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 14 Bootstrap Link https getbootstrap com docs 5 3 getting started introduction 1 1 2 2 2 0 2 4 S A M P L E F O O T E R T E X T 15 Class Participation 15 Submit your Webpage folder which should contain the index html file alongside everything else we discussed in class 1 1 2 2 2 0 2 4 S A M P L E F O …