Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

HTML and CSS Fundamentals: A Comprehensive Guide, Study notes of Information Integration

A comprehensive overview of html and css fundamentals, covering key concepts such as markup language, elements, styling, and layout. It explores the structure of html documents, including elements like headers, body, anchors, and lists. The document also delves into css styling, including inline, external, and precedence rules, as well as relative and absolute positioning. It further examines layout techniques like fixed and fluid grids, and provides insights into centering, aligning, and background image manipulation.

Typology: Study notes

2022/2023

Uploaded on 09/04/2024

jana-nayfeh
jana-nayfeh 🇺🇸

1 document

1 / 10

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
INSY 4315
Exam 1 Review
Chapter 1
1. Markup Language
HTML hypertext markup language; hypertext is a method of organization in
which data sources are interconnected through a series of links that users
activate to jump from one data source to another. Markup language is a
language that describes the content and structure of a document by “marking”
up or tagging
HTML5- defacto standard for the next generation of HTML
DHTML-dynamic HTML; dynamic content content that adapts to situation
o Methodical use of html, css and javascript
o Add effects to their pages that are difficult to achieve
XHTML extensible hypertext markup language: different version of html
enforced with a stricter set of standards
XML -extensible markup language; rules to define any data
o Cannot perform computing operations by itself
2. Elements
*when a browser encounters a sectioning element or grouping element, the default style is to
start the enclosed content on a new line, separating it from any content that appears before it
a. Block vs Inline
i. Inline element appear in line with surrounding content
1. Text-level elements
a. Boldface text <b>
b. Italics <i>
ii. Block elements start content on a new line and mark a self-contained block of
content
b. Meta metadata in the document head; describes how the document should be
rendered
i. Provides a generic list of metadata values like search keywords, viewport
properties and the file’s character encoding
ii. <meta attributes />
iii. Attributes:
1. charset=”encoding” – specifies the character encoding used in HTML
document
2. content=”text” – provides the value associated with the http-equiv or
name attributes
3. http-equiv=”content-typeIdefault-styleIrefresh provides an HTTP
header for the document’s content, default style or refresh interval
4. name=”text” sets the name associated with the metadata
c. Title- metadata;
pf3
pf4
pf5
pf8
pf9
pfa

Partial preview of the text

Download HTML and CSS Fundamentals: A Comprehensive Guide and more Study notes Information Integration in PDF only on Docsity!

INSY 4315

Exam 1 Review

Chapter 1

1. Markup Language

  • HTML – hypertext markup language; hypertext is a method of organization in

which data sources are interconnected through a series of links that users

activate to jump from one data source to another. Markup language is a

language that describes the content and structure of a document by “marking”

up or tagging

  • HTML5- defacto standard for the next generation of HTML
  • DHTML-dynamic HTML; dynamic content – content that adapts to situation

o Methodical use of html, css and javascript

o Add effects to their pages that are difficult to achieve

  • XHTML – extensible hypertext markup language: different version of html

enforced with a stricter set of standards

  • XML - extensible markup language; rules to define any data

o Cannot perform computing operations by itself

  1. Elements *when a browser encounters a sectioning element or grouping element, the default style is to start the enclosed content on a new line, separating it from any content that appears before it a. Block vs Inline i. Inline element – appear in line with surrounding content 1. Text-level elements a. Boldface text b. Italics ii. Block elements – start content on a new line and mark a self-contained block of content b. Meta – metadata in the document head; describes how the document should be rendered i. Provides a generic list of metadata values like search keywords, viewport properties and the file’s character encoding ii. iii. Attributes:
  2. charset=”encoding” – specifies the character encoding used in HTML document
  3. content=”text” – provides the value associated with the http-equiv or name attributes
  4. http-equiv=”content-typeIdefault-styleIrefresh – provides an HTTP header for the document’s content, default style or refresh interval
  5. name=”text” sets the name associated with the metadata c. Title- metadata;

i. store’s the document’s title or name, displayed in the browser title bar on a browser tab ii. not actually displayed as part of the web page but appears externally within the browser title bar/tab iii. document title d. Body – sectioning element i. Contains the entire content of the document e. Anchor – the name given to the anchored text i. content ii. Marks the page location iii. Marks content that acts as a hypertext link iv. Text level element – appears in line with surrounding context v. Default behavior = no lines; go next to each other bc in line element vi. Not supported by xhtml f. paragraph i. tags:

content

ii. text of a paragraph iii. grouping element iv. can include nested elemens g. heading (h1…h6) – sectioning element i. marks major headings with h1 representing the heading with the highest rank, h2 representing next highest ranked heading, etc h. horizontal rule i. empty element ii.
iii. Denote a major topic change within a section iv. Used to insert horizontal lines into the page i. img (embedded elements/interactive – content imported from another resource; can also be an inline element bc places with surrounding content) – contains a graphic image retrieved from an image file i. ”text” where file is the image file. If the browser can’t display it then the text in alt is displayed **can be closed without the / ii. Set width and height : width=”value” height = “value” j. List- type of grouping element i. Ordered lists ii. Unordered lists iii. Description lists – list of terms and matching descriptions

  1. Grouped by the dl element and terms marked with the dt element, and descriptions with the dd
  2. 2.
    a.
    term
    b.
    description
    c.
    3. By default, browsers will indent the descriptions associated
  1. Validator – programs that test code to ensure it contains no syntax errors
  2. White Space a. An empty or blank character like a space, tab or line break b. When the browser reads an HTML file, it ignores the presence of white-space characters between element tags and makes no distinction between spaces, tabs, or line breaks. c. Browser collapses consecutive occurrences of white space into a single occurrence d. Browser is only interested in the text context i. Ex:

    welcome to Curbside Thai.

    is the same as ii.

    Welcome to Curbside Thai.

also the same as iii.

welcome to Curbside Thai.

- Element Hierarchy: - - o ▪ Head content o o ▪ Body content o - Chapter 2 Style Sheets Types of user defined styles - Inline – highest order of precedence; added as element attributes within an HTML document and apply to the element alone o In line overrides embedded o Not considered best practice o Last styles to be interpreted by the browser because they are directly applied to a specific element o Advantage: clear exactly what page element is being formatted o Content Where property: value pairs define the styles which are applied directly to that element - embedded – styles added to the head of an HTML document; can only be applied to the HTML document in which they are created and are not accessible to other documents but they do override any styles in an external style sheet

o overrides external styles and only apply to the HTML doc in which they are created in o ** when all else is equal, the style that is loaded last has precedence over styles defined earlier

  • external – styles that the website author creates and places within a CSS file and links to the page; multiple documents can access the same style sheet
  • precedence: o style that is defined last has precedence o more specific style rule has precedence over the more general style rule ▪ rule applied to a specific paragraph takes precedence over a rule applied to the entire page Relative vs. Absolute Sizing and Positioning
  • Relative positioning is used to nudge an element out of its normal position in the document flow o Top, right, bottom and left properties indicate the extra space tjat is placed next to the element as its shifted into a new position o Layout of the other page elements are not affected; they occupy their original positions on the rendered page o If no top/bottom/right/left/ is specified then assumed values are 0 and the object won’t be shifted
  • Absolute positioning o Places an element at specific coordinates within a container where the top property indicates the position of the elements top edge, right determines right and so on o Use either top/eft or bottom/right coordinates, but not all 4 coordinates at the same time o Takes an element out of normal document flow – can lead to overlapping of elements o Browser needs to know where the object’s container is before it can position the objects within it Elements
  • Form o

o Syntax: box-sizing: type; ▪ Type is content-box, border-box, or inherit(inherit the property defined for the container)

  • Grid – not part of the web page content, it’s a systematic approach to visualizing how to best fit content onto a page o Number of rows is based on the page content o Number of columns is based on the number that provides the most flexibility in laying out the page content o Fixed grids ▪ Every column has a fixed position - Widths of the columns and margins are specified in pixels o Fluid grids ▪ Provides more support across different devices with different screen sizes - Column width is expressed in percentages o Floating element = column o Border vs. Outline ▪ Outline: simple lines drawn around an element, enclosing the content, padding and border spaces - Doesn’t add anything to the width or height, only indicates the extent of the element rendered on the page - outline-width: value; (value is expressed in thin, medium, thick) - outline-color: color; (color is a css name or value) - outline-style: style; (style is none, solid, double, dotted, dashed, groove, inset, ridge or outset) - can combine into one statement o outline: width style color; o Row vs. Column vs. Grid Cell ▪ Rows contain floating columns - Should only be displayed when both margins are clear of previously floated columns - Has to be able to expand in height to cover those objects or else floating columns run the risk of bleeding into the next row ▪ Columns – needs to be floated within its row - Grid columns are places within a div o - class=”col-numerator-denominator” where num and denom are the fractional width of the column - div.col- 1 - 1 {width:100;} for column 2 in row 1 use 1- 2 – establish width of each column based on class name ▪ Grid Cell – place specific elements within a grid cell at the intersection - By default, all of the specified elements are placed in the grid cell located at the intersection of the first row and first column
  • Syntax below is place element in a different cell: o Div – marks distinct rows and columns of the grid grid of a single row and two columns; expanded by placing a grid of two rows and two columns within each row dib within the column1 div Centering/Aligning Elements
  • Horizontal o Block elements can be centered horizontally within their parent element by setting both the left and right margins to auto o
  • Vertical – harder because the height of the parent element is typically determined by content which may not be a defined value o One solution is to display the parent element as a table cell with a defined height and then set the vertical align property to middle o To vertically center a single line of text within its parent element, set the line height of the text larger than the text’s font size Overflow Content
  • Principles of Design o Based on a pleasing layout o Balance: involves the distribution of elements ▪ In either symmetrical or asymmetrical balance o Unity: ability to combine different design elements into a cohesive whole

▪ Background image is attached to its element so that as you scroll through the element content, the background image scrolls with it ▪ Syntax: background-attachment: type; ▪ Type is scroll, fixed or local

  • Fixed for watermarks
  • Local is used for elements like scroll boxes to allow the element background to scroll along with the content within the box
  • Scroll sets the background to scroll with the element content o Background-position ▪ By default, browsers place the background image in the element’s top left corner ▪ To place the background at a different position
  • Syntax: background-position: horizontal vertical;
  • Where horizontal vertical provide the coordinates of the image ▪ Only useful for non-tiled images o Background-clip ▪ Element’s background is defined, by default, to extend only through the padding space and not to include the border space. ▪ Syntax to change: background-clip: type; ▪ Type is content box (extend the background through the element content, padding box (to extend the background through the padding space), or border box (to extend the background through the border space) ▪ The padding and border spaces would not be considered part of the background and thus would not show any background image ▪ Because the background extends through the padding space by default, all coordinates for the background image position are measured from the top-left corner of that padding space. ▪ To change background origin syntax: background-origin: type;
  • Where type is either content box, padding box, or border box CSS Filters
  • Filters adjust how a browser renders an image, background, or a border
  • Filters modify an object’s color, brightness, contrast, or general appearance
  • Introduced as a WebKit browser extension
  • Can be applied with the property: o filter: effect (params); ▪ where effect is a filter function ▪ params specify the parameters of filter function ▪ ex: blur, brightness, contrast, etc