1. Introduction
Full Stack Web Application Architecture
Web Browser <--(HTTP, Internet)--> Web Server/Application Server <--(LAN)--> Stroage System
- Web Browser: chrome, firefox, safaxi, edge
- Web/Application Server: node.js, apache, rails
- Storage System: mongoDB, MySQL
Technologies and Concepts
Browser environment
- HTML/CSS/JavaScript: Markup, sparation of content & style, reuse, scripting.
- Document Object Model(DOM): Document structure.
Browser software
- Model View Controller, Single page applications, Responsive design —— React.js
Backend communication
- API Design: HTTP/AJAX/REST/GraphQL
- Cookies/Sessions/State management: Storage/Trust
Backend implementation
- Web Server: HTTP request processing - Node.js
- DBMS: Schema, Objects, CRUD, indexes, transactions - MongoDB
- End-to-End: Scale and Security
2. HTML(HyperText Markup Language)
Browser environment is different from traditional app(GUIs based on pixels). Web browser display documents described in HTML. Until HTML5’s canvas region, you couldn’t write pixels. So, how to make applications out of documents? Currently, use JavaScript to dynamically generate and update documents.
Markup Language: include directives(指令) with content. Directives can dictate presentation or describe content.
Approach(方法)
- Start with content to be displayed.
- Annotate it with tags(HTML uses
<>
to denote tags)
HTML tags
Tags can provide the meaning of text(e.g. <h1>
means top-level heading, <p>
means paragraph, <ul><li>
for unordered list), formatting information(e.g. <i>
for italic(斜体)) and additional information(e.g. <img>
) to display.
HTML Evolution
Influenced by browser implementation quirks(怪癖). What to do if you see<p> some text
which missing closing</P>
? Is just complain bitterly about malformed(畸形的) HTML or figure out where was a missing </p>
and add it?
Depending on different choices, it’s forked into(分支为) HTML and XHTML(XML-based HTML). XHTML is more strict about adhering(坚持) to proper syntax.
Basic Syntax rules for XHTML
Document: hierarchical collection of elements, starting with
<html>
Element: start tag, contents, end tag. Elements may be nested(嵌套的).
Every element must have an explicit start and end. Start tags can contain attributes, such as src
, type
, name
, etc.
1 |
Handle markup characters in content
Character | How to disply |
---|---|
< |
< |
> |
> |
& |
& |
" |
" |
|
  |
Common used XHTML tags
Character | Effect |
---|---|
<p> |
New paragraph |
<br> |
Force a line break within the same paragraph |
<h1><h2> |
Headings |
<b>, <i> |
Boldface and italic |
<pre> |
Typically used fot code: indented(缩进) with a fixed-width font, spaces are significant(e.g. newlines are preserved) |
<img> |
Images |
<a href="..."> |
Hyperlink to another Web page |
<!--comments--> |
Comment tags |
<table>,<tr>,<ld> |
Tables |
<ul> <li> |
Unordered list(with bullets) |
<ol> <li> |
Ordered list(numbered) |
<div> |
Used for grouping related elements, where the group occupies entire lines(forces a line break before and after) |
<span> |
Used for grouping related elements, where the group is within a single line(no forced line breaks) |
<form>,<input>,<textarea>,<select> |
Used to created forms where users can input data |
<title> |
Specify a title fot the page, which will appear in the title bar for the browser window |
<link> |
Include CSS stylesheets |
<script> |
Used to add JavaScript to a page(can be used in body as weel) |
HTML differences from XHTML
HTML supports the same tags, same features, but allows quirkier syntax:
- Can skip some end tags, such as
<br>, <p>
- Not all attributes have to have values, such as
<select multiple>
- Elements can overlap:
<p><b>first</p><p>second</b>third</p>
Early browsers tried to “do the right thing” even in the face of incorrect HTML:
- Ignore unknown tags
- Carry on even with obvious syntax errors such missing
<body>
or<html>
- Infer the position of missing close tags
- Guess that some
<
characters are literal, as in “What if x < 0?” - Not obvious how to interpret some documents(and browsers differed)
Newer HTML - HTML5
- Additional tags to allow content definition, such as
<article>
,<section>
… - Drawing:
<svg>
can draw shapes(scalable vector graphics),<canvas>
can draw from JavaScript - 3D with WebGL - Timed media playback:
<video>
and<audio>
3. CSS(Cascading(级联) Style Sheets)
What font type and size does <h1>
generate? For early HTML, you can override defaults with attributes. Also, style sheets can specify style to use rather than browser default, and not have to code styling on every element.
Key concept: Separate style from content
Content(what to display) is in HTML files. Formatting information(how to display) is in separate style sheet(.css files). Use an element attribute names class
to link. So, you can define style information once, and use it in many places.
Style sheet contain one or more CSS Rules.
CSS Selector | CSS | HTML |
Tag name | h1 {color: red;} |
<h1>Today's Specials</h1> |
Class attribute | .large{font-size: 16pt;} |
<p class="large">... |
Tag and Class | p.large{...} |
<p class="large">... |
Element id | #p20{font-weight: bold;} |
<p id="p20">... |
CSS Pseudo(伪) Selectors
hover
- Apply rule when mouse is over element
1 | p:hover, a:hover{ |
a:link, a:visited
- Apply rule when link has visited or not visited(link)
1 | a:visited{ |
CSS Properties
Control many style properties of an element:
- Coloring
- Size
- Position
- Visibility
- Many more…
- Also used in animation.
Color
Must ultimately turn into red, green and blue intensities between 0 and 255.
- Predefined names: red, blue, green, white, etc.
- 8-bit hexadecimal numbers for red, green, blue: ·#ff0000`.
- 0-255 decimal intensities: rgb(255, 255, 0)
- Percentage intensities: rgb(80%, 80%, 100%)
CSS Box Model
CSS distance units
[TODO]
- 本文作者: 夏花
- 本文链接: http://xiahua19.github.io/2022/07/27/cs142-1-Introduction-HTML-and-CSS/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!