Please enable JavaScript.
Coggle requires JavaScript to display documents.
Learn web design a beginner's guide html - Coggle Diagram
Learn web design a beginner's guide html
part 2: html for structure
links
targeting a new browser window (attribute: target="_blank")
mail links
<a href="mailto:alklecker@example.com">
telephone links
<a href="tel:+01-800-555-1212">
Linking to a Specific Point in a Page
<h2 id="startH">H</h2>
<a href="#startH">H</a>
the href attribute
Absolute URLs provide the full URL for the document (http:// or https://)
Relative URLs href="recipes/index.html"
marking up text
paragraphs
display paragraphs on new lines ( display: block)
organizing page content
including main content (
main
), headers (
header
), footers (
footer
), sections (
section
), articles (
article
), navigation (
nav
), and tangentially related or complementary content (
aside
), (
address
)
the inline element roundup
inline elements
: they display in the flow of text by
default and do not cause any line breaks.
Text-Level (Inline) Elements
<em>…</em>
<strong>…</strong>
.....
generic elements (div and span)
Divide It Up (
div
): Use the div element to create a logical grouping of content or elements on the
page.
A span offers the same benefits as the div element, except it is used for phrase elements and does not introduce line breaks (it's inline elements)
id and class Attributes
The class attribute classifies elements into conceptual groups
The id attribute is used to assign a unique identifier to an element in the document
a class name may be shared by multiple elements
The id and class attributes are not limited to just div and span
Global Attributes
HTML5 defines a set of attributes nthat can be used with every HTML element. They are called the global attributes:
accesskey, class, contenteditable, dir, draggable, lang...
IMPROVING ACCESSIBILITY WITH ARIA
we have ARIA (Accessible Rich Internet Applications), a standardized set of attributes for making pages easier to navigate and interactive features easier to use
ARIA defines roles, states, and properties that developers can add to markup and scripts to provide richer semantic
information.
More content elements
there are a few more special text elements to add to your HTML toolbox that don’t fit into a neat category: long quotations (
blockquote
), preformatted text (
pre
), and figures (
figure
and figcaption).
Lists
Unordered lists <ul> <li>
Ordered lists <ol> <li>
Description lists <dl> <dt> <dd>
thematic breaks
<hr/> was defined as a “horizontal rule” because it
inserts a horizontal line on the page
character escapes
Characters that might be misinterpreted as code need to be escaped in the source document
Escaping means that instead of typing in the character itself, you represent it by its numeric or named character entity reference
example: < > " is
< > "
headings
search engines look at heading levels as part of
their algorithms (information in higher heading levels may be given more
weight)
images
responsive image markup
We’ve looked at how to use the img element with srcset and sizes to make
pixel-ratio-based
and
viewport-size-based selections
Variable-Width Images (w-descriptor)
High-Density Displays (x-descriptor)
Device-pixel-ratios: The ratio of the number of device pixels to CSS pixels is called the device-pixel-ratio
We also saw how the picture element can be used for
art-direction-based
and
image-type-based selections
Art Direction (picture Element)
Alternative Image Formats (type Attribute)
whew! we're finished
adding svg images (Scalable Vector Graphics)
Embedded with the img Element : <img src="/images/circle.svg" alt="">
Inline in the HTML Source
<p>This summer, try making pizza
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100">
<circle fill="#D4AB00" cx="36" cy="36" r="36"/>
<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
</svg>
on your grill.</p>
Embedded with the object Element
<object type="image/svg+xml" data="pizza.svg">
<img src="pizza.png" alt="pizza">
</object>
Used as a Background Image with CSS
header {
background-image: url(/images/decorative.svg);
}
svg fallbacks
the image element
<img src="/images/arrow.gif" alt="">
First, a word on image formats
Bitmapped images are made up of a grid of colored pixels.
Vector images contain paths that are defined mathematically. (svg)
creating a simple page
step 1: start with content
step 2: give the html document structure
step 3: identify text elements
step 4: add an image
step 5: change the look with a style sheet
table markup
minimal table structure
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
...
</table>
table headers <th>
spanning cells (attr colspan, rowspan)
table accessibility
column groups (<colgroup>)
row group (<thead>…</thead>,<tbody>…</tbody>, <tfoot>…</tfoot>)
forms
the form element
The action Attribute
The method Attribute
<form action="/mailinglist.php" method="POST">...
variables and content
the great form control roundup
This section introduces the elements used to create
• Text-entry controls
• Specialized text-entry controls
• Submit and reset buttons
• Radio and checkbox buttons
• Pull-down and scrolling menus
• File selection and upload control
• Hidden controls
• Dates and times
• Numerical controls
• Color picker control
progress
meter
output
form accessibility features
The
label
,
fieldset
, and
legend
form elements improve accessibility by making the semantic connections between the components of a form clear
embedded media
window-in-a-window (<iframe> (short for inline frame))
multipurpose embedder (<object>)
<video> and <audio>
canvas
The canvas element creates an area on a web page for drawing with a set of JavaScript functions for creating lines, shapes, fills, text, animations (<canvas>…</canvas>)
part 1: getting started
some big concepts you need to know
a multitude of devices
sticking with the standards
progressive enhancement
responsive web desgin
one web for all ( accessibility)
site performance
how the web works
a word about browsers
The software
(browsers)
that does the requesting is called the
client
HTTP can be used to transfer
images, movies, audio files, data, scripts, and all the other web resources
that commonly make up websites and applications
use browsers to access documents on the web and is responsible for converting HTML and CSS into what you see
web page addresses (urls)
Every page and resource on the web has its own special address called a
URL
(Uniform Resource Locator)
A complete URL is generally made up of three components:
the protocol
,
the site name
, and
the absolute path to the document or resource
(http:// www.example.com /2018/samples/first.html)
serving up your information
Because the computers, that make up the internet, “serve up” documents upon request, these computers are known as servers
In order for a computer to be part of the web, it must be running special web server software that allows it to handle HyperText Transfer Protocol transactions.
(HTTP servers)
Every computer and device connected to the internet is assigned a unique numeric
IP address
Matching the text
domain names
to their respective numeric
IP addresses
is the job of a separate
DNS server
the internet vs the web
The internet is an international network of connected computers
the web is just one of the ways information can be shared over the internet
The web uses a protocol called HTTP (HyperText Transfer Protocol).
the anatomy of a web page
Web pages use a markup language called HyperText Markup
Language, or HTML for short
css Cascading Style Sheets: to add style
scripting language is js: to add behaviors
getting started in web design
it takes a village ̣ (website creation roles)
Content wrangling
information architecture
Content strategy
User Experience, Interaction, and User Interface design
code slinging
frontend developer
backend developer
full-stack developers
part 3: css for presentation
formatting text
basic font properties
advanced typography with css3
changing text color
a few more selector types
text line adjustments
underlines and other "decorations"
changing capitalization
spaced out
text shadow
changing list bullets and numbers
colors and backgrounds
specifying color values
foreground color
background color
clipping the background
playing with opacity
pseudo-class selectors
attribute selectors
background images
the shorthand background property
like a rainbow(Gradients)
finally external style sheets
wrapping it up
thinking inside the box
the element box
specifying box dimensions
padding
borders
margins
assigning display types
box drop shadows
floating and positioning
normal flow
floating
fancy text wrap with css shapes
positioning basics
relative positioning
absolute positioning
fixed positioning
css layout with flexbox and grid
flexible boxes with css flexbox
css grid layout
responsive web design
why RWD?
the responsive recipe
The technique has three core components:
Flexible images
CSS media queries
How to use media queries
With external style sheets
Within a style sheet
A flexible grid (Fluid Layouts)
setting the viewport
choosing breakpoints
designing responsively
Responsive layout patterns
Following are the top patterns Luke:
www.lukew.com/ff/entry.asp?1514
Mostly fluid
Column drop
Layout shifter
Tiny tweaks
Off canvas
typography
Navigation
images
Special content( Table, forms, interactive)
a few words about testing
real devices
Emulators
Third-party services
more rwd resources
transition, transforms, and animation
ease-y does it ( css transition)
css transforms
keyframe animation
wrapping up
more css techniques
styling forms
styling tables
a clean slate ( reset and normalize.css)
image replacement techniques
css sprites
css feature detection
wrapping up style sheets
modern web development tools
css power tools(Processors)
build tools(grunt and gulp)
version control with git and github
part 4: js for behavior
introduction to js
using javascript
part 6: appendices
html
css selectors, levels 3 and 4
answers
from html + to html 5
part 5: web image
image asset production
svg
web image basics