Docsity
Docsity

Prepara i tuoi esami
Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity


Ottieni i punti per scaricare
Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium


Guide e consigli
Guide e consigli


Schemi di html e css per Web Design, Schemi e mappe concettuali di Design

Schemi brevi con basi di HTML e CSS per esame di Web Design, da usare come ripasso o da tenere sotto mentre si scrivono i codici

Tipologia: Schemi e mappe concettuali

2022/2023

Caricato il 06/07/2023

alice-gi7
alice-gi7 🇮🇹

1 documento

1 / 10

Toggle sidebar

Questa pagina non è visibile nell’anteprima

Non perderti parti importanti!

bg1
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
<html> the HTML document itself begins with!<html>!and ends with!</html>.
<!DOCTYPE html> All HTML documents must start with a document type declaration
<meta> The!<meta>!tag defines metadata about an HTML document. Metadata is data
(information) about data.
<meta>!tags always go inside the <head> element, and are typically used to specify character set,
page description, keywords, author of the document, and viewport settings.
<head> The!<head>!element is a container for metadata (data about data) and is placed between
the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta
information.
The following elements can go inside the!<head>!element:
<title>!(required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
<body> The visible part of the HTML document is between!<body>!and!</body>.
<header> The!<header>!element represents a container for introductory content or a set of
navigational links.
A!<header>!element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
<div> The!<div>!tag defines a division or a section in an HTML document.
The!<div>!tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.
pf3
pf4
pf5
pf8
pf9
pfa

Anteprima parziale del testo

Scarica Schemi di html e css per Web Design e più Schemi e mappe concettuali in PDF di Design solo su Docsity!

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. the HTML document itself begins with and ends with . All HTML documents must start with a document type declaration The tag defines metadata about an HTML document. Metadata is data (information) about data. tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. The element is a container for metadata (data about data) and is placed between the tag and the tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The following elements can go inside the element:
  • (required in every HTML document)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript> <body> The visible part of the HTML document is between <body> and </body>. <header> The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains:
  • one or more heading elements (<h1> - <h6>)
  • logo or icon
  • authorship information <div> The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The tag is easily styled by using the class or id attribute. Any sort of content can be put inside the tag! Note: By default, browsers always place a line break before and after the element. links are defined with this tag attribute where the links are defined images are defined with this tag Src= source file alt= alternative text he tag specifies an input field where the user can enter data. The element is the most important form element. The element can be displayed in several ways, depending on the type attribute. The tag defines an unordered (bulleted) list. Use the tag together with the tag to create unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the tag. The tag defines a list item. The tag is used inside ordered lists(), unordered lists (), and in menu lists (). In and , the list items will usually be displayed with bullet points. In , the list items will usually be displayed with numbers or letters. Tip: Use CSS to style lists. defines a section in a document.

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.

CSS CSS stands for Cascading Style Sheets

  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files .navbar The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. #The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Box-sizing: Defines how the width and height of an element are calculated: should they include padding and borders, or not Border-box: padding, margin are included with the size of the box Padding vs margin La differenza tra marging e padding nel linguaggio CSS consiste nel fatto che il primo si riferisce allo spazio tra un box e l'altro regolando in diverse misure e con una particolare sintassi, mentre il secondo serve a gestire lo spazio tra il contenuto e il bordo del box che lo contiene. Position The position property specifies the type of positioning method used for an element. There are five different position values:
  • static An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page
  • relative An element with position: relative; is positioned relative to its normal position.
  • fixed An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:
  • absolute An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
  • sticky An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Justify-content The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Tip: Use the align-items property to align the items vertically. Note: The justify-content property can also be used on a grid container to align grid items in the inline direction. For pages in English, inline direction is left to right and block direction is downward. Align-items The align-items property specifies the default alignment for items inside a flexbox or grid container.

  • In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction).
  • In a grid container, the grid items are aligned in the block direction. For pages in English, block direction is downward and inline direction is left to right. For this property to have any alignment effect, the items need available space around themselves in the appropriate direction. Tip: Use the align-self property of each item to override the align-items property. Display The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

inlin

e

Displays an element as an inline element (like

). Any height and width properties will have

no effect

block Displays an element as a block element (like

).

It starts on a new line, and takes up the whole width

cont

ents

Makes the container disappear, making the child

elements children of the element the next level up in

the DOM

flex Displays an element as a block-level flex container

grid Displays an element as a block-level grid container

@media screen The @media rule is used in media queries to apply different styles for different media types/devices.

table

head

er-

grou

p

Let the element behave like a element

table

foote

r-

grou

p

Let the element behave like a element

table

row-

grou

p

Let the element behave like a element

table

-cell

Let the element behave like a element

table

colu

mn

Let the element behave like a element

table

-row

Let the element behave like a element

none The element is completely removed

initia

l

Sets this property to its default value. Read

about initial

inher

it

Inherits this property from its parent element. Read

about inherit

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech). In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width. Flex-direction he flex-direction property specifies the direction of the flexible items. Note: If the element is not a flexible item, the flex-direction property has no effect. Z-index A z-index is a CSS property that controls overlapping HTML elements’ vertical stacking order, which appears closer to the viewer.

Value Description

row Default value. The flexible items are

displayed horizontally, as a row

row-reverse Same as row, but in reverse order

column The flexible items are displayed vertically,

as a column

column-

reverse

Same as column, but in reverse order

initial Sets this property to its default value. Read

about initial

inherit Inherits this property from its parent

element. Read about inherit

Reset A reset file is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline. It is a 'slash and burn' approach that wipes out all the default styles and lets you start from scratch. If you want to truly start from scratch, a reset file will let you do that. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

px

(pixels)

unità di misura ideale per gli schermi. È

quella più usata e facile da comprendere.