HTML Lecture Notes - Ngee Ann Polytechnic

Official Open HTML Last update : 13/10/2024  Official Open What makes a website? HTML ○ HyperText Markup Language ○ Structure and content CSS ○ Cascading Style Sheets ○ Styles...

Official Open HTML Last update : 13/10/2024  Official Open What makes a website? HTML ○ HyperText Markup Language ○ Structure and content CSS ○ Cascading Style Sheets ○ Styles and colours JS ○ JavaScript ○ Logic and functionality  Official Open What makes a website? HTML HTML/CSS HTML/CSS/JS  Official Open Demonstration  Official Open Pure HTML document  Official Open Minimal HTML document Hello world! My cat is very grumpy  Official Open Minimal HTML document  Official Open HTML document A HTML document is made up of elements ○ Hello world! ○ My cat is very grumpy Each element comprises of ○ opening tag ○ closing tag ○ Content  Official Open HTML element: anatomy  Official Open Rendering HTML documents Browser reads and renders HTML document from top to bottom  Official Open Rendering elements Two roads diverged in a yellow wood, And sorry I could not travel both  Official Open Rendering elements Two roads diverged in a yellow wood,***** is break | Goes to next line And sorry I could not travel both  Official Open Rendering elements Two roads diverged in a yellow wood, ***** is division And sorry I could not travel both  Official Open Rendering elements Two roads diverged in a yellow wood, And sorry I could not travel both ***** is paragraph  Official Open Common HTML elements ul, ol unordered list/ ordered list li list h1, h2, h3, h4, h5, h6 the different sizes of heading a achor >> creating links to other web pages or resources img display img input user input table display in rows and cols  Official Open Lists Courses available If its the thing will not be a numbered list but bullet points Cybersecurity & Digital Forensics (CSF) Data Science Immersive Media Information Technology  Official Open  Official Open id and class attributes Cybersecurity & Digital Forensics (CSF) Data Science Immersive Media Information Technology  Official Open Section heading Countries Asia Singapore Sunny island North America Mexico Tacos  Official Open Text formatters Used to change how the text is displayed on the browser strong ○ Place emphasis on text ○ Browsers usually bold the text emphasis ○ Place emphasis on text ○ Browsers usually italicise the text  Official Open Text formatters Two roads diverged in a yellow wood, And sorry I could not travel both  Official Open Image  Official Open Image  Official Open Image alt >> The text will appear even if there’s no pic  Official Open Image alt text  Official Open Image  Official Open External image  Official Open Anchor Hyperlink reference Ngee Ann Poly Homepage Ngee Ann Poly Homepage  Official Open Code along  Official Open Pair hands-on  Official Open Void elements Consists of a single tag ○ Does not have a corresponding closing tag  Official Open Comments This is a comment Cybersecurity & Digital Forensics (CSF) Data Science Immersive Media Information Technology (windows) - ctrl + / (macOS) - cmd + /  Official Open Checkpoint  Official Open How many HTML elements are there? Cybersecurity & Digital Forensics (CSF) Data Science Immersive Media Information Technology 5 elements. Opening n closing are counted as one.  Official Open What are src, alt, href, and target? Ngee Ann Poly Homepage target >> used to specify where the linked document should open when a user clicks on a link href >> cypher link reference  Official Open Why does the image not load?  Official Open End of slides  Official Open Appendix  Official Open Void elements