INLS 572 Web Development HTML Basics Joan Boone jpboone@email.unc.edu Slide 1
Topics Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS Slide 2
HTML Basics: Document Structure • HTML defines the structure of a web document and describes the content. • HTML does not define presentation or layout Minimal structure of an HTML document <!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> Title goes here </title> </head> <body> Page content goes here </body> </html> Slide 3
HTML Basics: Document Content Text elements Paragraphs <p> Headings <h1> <h2> <h3> <h4> <h5> <h6> Lists <ol> <ul> <dl> Images (jpg, png, gif) <img src="mypic.png" alt="image desc"> Links <a href="https://sils.unc.edu">SILS</a> Other content elements, but we will not cover... Tables <table> <tr> <th> <td> Forms <form> <input> Slide 4
HTML Basics: Organizing Content with Generic Elements <div> • Block element that specifies a division of content in a document • Can have an id or class attribute that describes the content, and can be associated with a style sheet or script <div> <h2>Appalachian Trail</h2> <p>Stretching from Georgia to Maine, the National ...</p> … </div> <span> Similar to <div> but is an inline element often used for phrases, and • can also be associated with an id or class attribute for styling purposes <p>... maintains <span>95.5 miles</span> of the 2,185 mile ...</p> Slide 5
Simple Web Page Click image to view in browser Click here to view in CodePen Slide 6 nc-national-parks.html
Working with Images Where to get images Create your own Stock photography and illustrations: Unsplash.com, Flickr Creative Commons, Freeimages.com Image editing Should have basic editing skills to crop, re-size, and create transparent backgrounds A few image editing tools: PhotoShop, GIMP, Canva, ... Optimization Images often account for the most bytes per page Can improve page load time by reducing image size Many free image optimization tools Often re-sizing and cropping may be sufficient Slide 7
Image Formats: png, jpeg, gif Which format to use? Photographs Graphical, with flat colors, or requires transparency MDN Web Docs: Choosing an image format Slide 8
HTML Basics: Links Anchor element <a>...</a> <a href="https://sils.unc.edu">SILS</a> Destination link (URL) address Visible text Absolute vs. relative URLs • Absolute URLs specify the full URL for a document, including the protocol, domain name, and path name; used for referencing external resources (outside of your website or server) <a href="https://digitalaccessibility.unc.edu/resources/all-resources/"> Digital Accessibility</a> Relative URLs specify the path name relative to the current document • (“internal link”) <a href="/courses/2020/fall">Fall semester classes begin</a> Slide 9
Website Organization and Internal Links • Even small websites may have many resources Pages (home, about, contact, events, ...) Images, files (PDF, compressed, audio, video) Style sheets, JavaScript • Root directory is the starting point for your site Contains all of your site files and directories Typically, it contains a page named index.html , the default page (or home page for your website) • Use relative URLs to reference resources within your website <img src="images/UNC_SILSlogo.png"> <link href="css/style.css" rel="stylesheet" /> <a href="index.html">INLS 572</a> Recommendation: design a directory structure that is descriptive, maintainable, and will meet future needs. • “Cool URIs don't change” by Tim Berners-Lee (1999) Slide 10
Topics Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS Slide 11
HTML5.3: Current Specification • W3C Working Draft as of October 2018 HTML5 was approved in October 2014 • Not really a new version, rather the “latest work on HTML” • Guidelines and design principles New features should be based on the core technologies: HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (Flash, Silverlight) Better error handling More markup to replace scripting Support existing content Don't “reinvent the wheel”, and “pave the cow paths” Slide 12
HTML5: What's “New” • Simpler markup • Semantic elements • Rich media Audio and Video Canvas API to create dynamic images Scalable Vector Graphics (SVG): “HTML for graphics” CSS3 Animation • Web forms: new input types and better validation • Application Programming Interfaces (APIs) Geolocation, drag & drop Local and session storage – no dependency on cookies When can I use... HTML, CSS compatibility tables Slide 13
HTML5: Simpler Markup <! DOCTYPE html> instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> instead of <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <link rel="stylesheet" href="styles.css"> instead of <link rel="stylesheet" href="styles.css" type=”text/css”> <script> instead of <script type="text/javascript"> Slide 14
HTML5 Semantic Elements Organizing Page Content Before HTML5, the most commonly used element for organizing content was the div element. A generic element that can be nested and styled • • But, it does not convey the purpose or meaning of page content HTML5 introduces semantic elements that provide descriptive names to sections of a document • section, article, nav, aside, header, footer, figure, figcaption • Why these names? Similar to results found in Google's Web Authoring Statistics study for common class names • Complete list of semantic elements Slide 15
Using Semantic Elements Slide 16 Source: Viking Code School, HTML5 Semantic Tags
Topics Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS Slide 17
HTML + CSS Early HTML included elements to define Structure of the content (headings, paragraphs, lists), and Presentation or typography (fonts, italics, underlining, margins, alignment) to format the content Today, use Cascading Style Sheets (CSS) to Separate presentation from content (and structure) • Example: CSS Zen Garden: The Beauty of CSS Design HTML5 does not support presentation elements • List of deprecated HTML tags and attributes Slide 18
Benefits of HTML + CSS HTML • Clarity, readability, maintainability • Accessible – no formatting “clutter” • Better analysis by other programs, tools, search engines • Web pages load faster – less HTML, style sheet caching CSS • More formatting options than HTML • Maintainability (embedded HTML formatting is annoying) • Reuse (within and across websites) • Responsive web design Slide 19
HTML + CSS: Separate Content and Presentation with External Style Sheets External style sheets (recommended!) <head> <title>Title goes here</title> <link rel=”stylesheet” href=”style.css”> </head> Embedded style sheets (ok for small style sheets) <head> <title>Title goes here</title> <style> ... </style> </head> Inline styles (don't do this!) <h2 style=”color:blue”>The sky is blue</h1> Slide 20
Recommend
More recommend
