intro to html and css
Studied by 0 people
Knowt Play
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/59
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
60 Terms
website
multiple web pages
2 sides of website development
user-centered design and static front-end web development
user-centered design
info organization, visual design principles, interaction design, and usability/user testing
static front-end web development
structure (HTML), style content/presentation (CSS), client interactivity/behavior (Javascript), and using reference docs
static website
content never changes and everyone sees the same version
static website example
blog
dynamic website example
sites with personal algorithms, such as social media (Instagram, TikTok, YouTube, etc.)
both sides of website development involve…
accessibility
information architecture
content and navigation
steps of creating a website
design
code
steps of design
identify audience
understand goals
assemble content
organize content into web pages
plan design
evaluate design
audience
specific group of peoplpe with cohesive/common goals, not necessarily identity
steps of code
structure content in HTML
style using CSS
add interactivity/enhance UX with Javascript
HTML
hypertext markup language that structures web pages using <tags> (ignoring whitespace)
web browser
renders .html (plain text) files, then CSS
boilerplate
standard HTML document structure
empty elements
have no content/closing tag
empty element examples
<hr> (horizontal rule) and <br> (break)
nested elements
creates hierarchy and should be indented
<head>
contains metadata that describes document, not structure
metadata element examples
<title> and <meta>
reference
Mozilla Developer Network (MDN)
correct HTML markup
structure and semantics (meaning)
structural markup
identifying type of content
semantic markup
indicating emphasis (<em>) or strong importance (<strong>)
incorrect HTML markup
styling content, such as using bold (<b>), italics (<i>), or underline (<u>)
block level
starts on new line (h1-h6, p, div)
inline
flows within text and does not start on new line (b, i, img, em, strong, span)
CSS
cascading style sheets; creates rules that control how boxes and their content are presented
parts of a CSS rule
selector, declaration, property, and value
CSS rule example
p {
font-family: serif; }
selector example
p
declaration example
font-family: serif;
property example
font-family:
value example
serif
cascading
last and more specific rules take precedence
link HTML to CSS
<link href=”styles/site.css” type=”text/css” rel=”stylesheet”/>
<style>
HTML element in <head> that styles document with CSS and should only be used for single page websites
long passages of text font
serif
code font
monospace
small text font
sans-serif/sans
font-size
in pt
uppercase rule
never type content in all caps, use text-transform: uppercase
DOM
document object model
browser DOM element
stores element content and style for browser memory
how to add CSS
create CSS file in styles folder
link CSS file to all HTML files
code styling rules
validate
shape
hard lines vs soft edges
borders
emphasize/deemphasize shape to attract/detract attention to element
border-radius
soften element edges and change shape, such as ellipse
list-style-type
changes bullet shapes
HEX
best way to specify color in CSS, RRGGBB
full brightness
ff
no brightness
00
red HEX
ff0000
green HEX
00ff00
blue HEX
0000ff
black HEX
000000
white HEX
ffffff
generic font families
serif, sans-serif, and monospace; always work in browser and best for accessibility
fallback
generic font family serves as last resort for inaccessible named fonts