Notes
Notes - notes.io |
Formatting arbitrary text with <span>
identifying regions = class and id attributes
Tables:
tables are used to display tabular information
tables start with outer <table>, rows with <tr> and entity within the <td> tag
tables can have captions and header:
A caption can be added to a table with the <caption> tag, placed immediately after the <table> tag
the <th> tag is used to define table headers
Tables can be nested
cells in a table can be merged using:
-rowspan to specify that a cell (td/th) spans multiple rows
- colspan to specify that a cell (td/th) spans multiple columns
if a cell is not defined, it is classed as empty and has no border
Structuring Pages:
The <div> tag is used to identify groups of elements which are to be treated together, particularly to structure the overall layout of a page
- usually best to use <div> as the unit to position elements in a document
Has class and/or id atributes defined:
<div class="main" id="CMPtoplevel"> </div>
Formatting and positioning can then be applied from a stylesheet
Identifying HTML elements
> Most HTML elements can be identified as a member of a class or uniquely
- the class attribute identified a group of elements which can be formatted in the same way using CSS
- The ID attribute uniquely identified an element
Structuring tags in HTML5
- header - for introductory or navigational aids
- footer for a section
author details, copyright information, etc
- nav is a section of the document intended for navigation
Document Flow
> article, is an independent piece of content, such as a blog entry or newsaper article
> section shows the document structure, can be used with h1...h6 element.
> aside is a piece of content that is only slightly related to the rest of the page, similar to a sidebar in a magazine article
figure refers to a non-text unit of a document
<figure>
<video src="eg.webm" controls></video>
<figcaption>Example</figcaption>
</figure>
figcaption can be used for an optional caption
Formatting text: <span>
the span tag is used to identify blocks of text - such as parts of a paragraph - which can be formatted in some way
> a common use of span is to format a fragment of text differently
e.g.
<span class="boldblue">Some important text</span>
<span dir="rtl" lang="arrgnng"</span>
What is HTML5
A suite of tools for:
- markup and media display (HTML)
- presentation - CSS
- interaction - JavaScript
- APIs for loca storage, geolocation
> associated standards for 2D and 3D graphics
Versions of HTML:
has evolved a long way
- HTML 4.01 - is the end of the line 'classic' HTML
> poor separation of display from structure
> lax implementations, difficult to maintain
XHTML 1.0 is the first really clean standard
> because it is an XML language, the implementation is very strict
> easy to maintain, repurpose, so preferred for large websites
Now it's all HTML5
- Compatible with XHTML and HTML 4
can write HTML5 in either style
GRAPHICS
the <canvas> tag uses JavaScript to give pixel-by-pixel control over a rectangular area
> paths
> gradients
> image manipulation
> events
svg
- Scalable Vector Graphics allows direct inclusion of vector drawing commands
webgl
- 3D graphics via a JavaScript API based on OpenGL
STORAGE
Local Data Storage:
- session
- long term
Replace Cookies
- cookies can't store much data so they are transmitted by every request to the server
Manipulated by JavaScript, browser based SQLite or IndexedDB
Cascading Style Sheets (CSS)
Motivation for CSS:
> Problems
- Devices display pages differently
- Phones, tablets and other small devices need different displays
- Printers often need different displays
> Clean separation of content from display instructions helps
> Styles introduced in HTML 4.0
Cascading style sheets
> Multiple style definitions are merged
> Priority order (later overrides earlier):
4 - browser default
3 - external style sheet
2 - internal style sheet (contained in the <head> tag)
1 - in-line style (define in attributes of an element)
CSS rules
> CSS stylesheets are made up of rules
> a CSS rule has 3 parts
- selector: defines the part of the document affected by the rule
- property: specifies the aspect of layout that's being set
- value: the value for the property
Rules and media types:
- can have separate stylesheets for different media using multiple <link> tags
<head>
<link rel=stylesheet type="text/css" media="all" href="basis.css">
<link rel=stylesheet type="text/css" media="handheld" href="mob.css">
</head>
Rules can be restricted to certain media types
@media handheld
@media screen
selectors:
- class selectors:
> body {}
> div.menu {}
> #banner - elements within a id
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
