int web 1 NEW

what does HTML stand for

what does HTML stand for

hyper text markup language

what is HTML

standard markup language for creating web pages

In a php application, what is HTML responsible for?

HTML is responsible for defining the structure and presentation of content displayed in a web browser.

HTML elements

HTML elements are building blocks of a webpage, defining its structure and content.

HTML attributes

HTML attributes provide additional information about an element and are placed inside the element's opening tag

how wrapping an element in another element affects wrapping???

how different elements render different things to the webpage and why you might pick one over another

structural vs semantic

• example with strong vs. bold text

• visual output the same, but strong has an effect on the screenreader

• do what is more accessible + better for users

how do hierarchies of information help a user understand information on a webpage?

• use of headings, subheadings, paragraphs, to help users navigate

Understand semantic vs structural - what is conveyed by the selection of an element?

structural - no deeper meaning besides what’s on the webpage

semantic - has meaning behind the output on webpage - screen readers for instance

different HTML image formats

JPG, PNG, GIF, vector images, SVGS, bitmap

JPG

• stands for joint photographic experts group

• pros: smaller file, found everywhere

• data loss makes it worse for printing, no transparency

PNG

• stands for portable network graphics

• holds more information than JPGS, used more often when images are complex, can be transparent

• pros: higher quality

• cons: slower than JPG

GIF

• pros: can contain animation

• cons: PNG compression is better than GIF compression

vector images

• constructed using mathematical formulas describing shapes, colors, and placement

• pros: scalable, can be compressed

• cons: not suited for complex graphic displays

SVGS

• scalable vector graphic

• used for rendering two-dimensional images on the internet

• pros: great for logos

• cons: lack of pixels make displaying high quality digital photos difficult

HTML forms

• use elements to collect data from users

form structure

• form element

• control elements

• show code

how do forms work

• user fills in a form and then presses a button to submit the information to the server

• have an action and a method

what is a form’s default response in HTML

• a user fills in a form and presses a button to submit the information to the server

how to include content in a webpage (internal and external)

use element tags

• internal: "<img src =”image.jpg”>

• external: <img src = “https://www.example.com/image.jpg”>

what is CSS

• stands for cascading style sheets

• lets us style our pages to make them prettier

CSS rules

• contains two parts: a selector and a declaration

p {

font-family: Arial; }

p is the ____________ and font-family: Arial; is the -_____

selector, declaration

what are ways that css rules cascade and take precedence

• inheritance

  • CSS properties are inherited from parent elements by their children (if the children has no other value set to it)

• last rule

  • rule that appears last in the stylesheet takes precedence

• specificity

  • css rules with higher specificity override those with lower specificity

• important

  • !important declaration in a CSS rule gives it the highest precedence

box model in HTML

• html treats every element as living in its own box

display: block

• renders element as block-level element

• it will start on a new line and stretch full width of its containing element by default

display: inline

• flow horizontally within the text content of their element

• no new line

• no width or height

display: inline-block

• exhibit characteristics of both inline and block elements

• have inline flow (do not start on a new line)

• block like behavior (can have their own width, height, margins, padding, borders)

display: none

• hides element from the layout entirely

margins

• controls gap between boxes

padding

• allows you to specify how much space should appear between the content of an element and its border

border

literally just the border around an element me thinks…..idk

flexbox

• a one dimensional CSS web layout model

• can work on either rows OR columns

css grid

• a two dimensional CSS web layout

• can work on rows and columns simultaneously

bootstrap

• popular column based CSS framework

• includes HTML and CSS based design templates

what are CSS frameworks? why use one?

• prewritten, standardized sets of CSS rules and styles that developers can use to style their web projects more quickly and

class selector

• used to “find” or “select” the HTML elements you want to style

• the same rule can apply to more than one element if you separate the element names with commas

class declarations

• are inside curly brackets

• have a property and a value

  color: (property) yellow; (value)