HTML Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics Part - - PowerPoint PPT Presentation

▶
html basics
SMART_READER_LITE
LIVE PREVIEW

HTML Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics Part - - PowerPoint PPT Presentation

Jun 18, 2023 324 likes •530 views

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

slide-1
SLIDE 1

Slide 1

HTML Basics

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

slide-2
SLIDE 2

Slide 2

Topics

Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS

slide-3
SLIDE 3

Slide 3

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-4
SLIDE 4

Slide 4

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-5
SLIDE 5

Slide 5

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>

<p>... maintains <span>95.5 miles</span> of the 2,185 mile ...</p>

<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

slide-6
SLIDE 6

Slide 6

Simple Web Page

nc-national-parks.html

Click image to view in browser Click here to view in CodePen

slide-7
SLIDE 7

Slide 7

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-8
SLIDE 8

Slide 8

Image Formats: png, jpeg, gif

Which format to use?

Graphical, with flat colors,

  • r requires transparency

Photographs MDN Web Docs: Choosing an image format

slide-9
SLIDE 9

Slide 9

HTML Basics: Links

Anchor element <a>...</a>

<a href="https://sils.unc.edu">SILS</a>

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)

  • Relative URLs specify the path name relative to the current document

(“internal link”) <a href="/courses/2020/fall">Fall semester classes begin</a> <a href="https://digitalaccessibility.unc.edu/resources/all-resources/">

Digital Accessibility</a>

Destination link (URL) address Visible text

slide-10
SLIDE 10

Slide 10

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-11
SLIDE 11

Slide 11

Topics

Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS

slide-12
SLIDE 12

Slide 12

  • 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”

HTML5.3: Current Specification

slide-13
SLIDE 13

Slide 13

  • 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

HTML5: What's “New”

slide-14
SLIDE 14

Slide 14

<!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">

HTML5: Simpler Markup

slide-15
SLIDE 15

Slide 15

HTML5 Semantic Elements

Organizing Page Content

Before HTML5, the most commonly used element for

  • rganizing 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-16
SLIDE 16

Slide 16

Using Semantic Elements

Source: Viking Code School, HTML5 Semantic Tags

slide-17
SLIDE 17

Slide 17

Topics

Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS

slide-18
SLIDE 18

Slide 18

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-19
SLIDE 19

Slide 19

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-20
SLIDE 20

Slide 20

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>