HTML Intro

Html – hypertext markup language
Gives content structure and meaning

CSS – cascading style sheets
Style the appearance of content using fonts and colors
HTML Intro
Html docs have required structure
Document type declaration, or <!DOCTYPE html>

Informs web browsers which version of html is being used
Placed at the beginning
<html> marks the beginning of the doc, elements following:
<head> identifies the top of the doc
Not displayed on the web page itself but the title bar in the window
<body> all visible content on the page
∴ 例子：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Headings and paragraphs
<title> element
<head>
<title>Title of the HTML page</title>
</head>
<h1> element defines the most important heading

<p> element defines a paragraph
<body>
<h1>The most important heading</h1>
<p>Paragraph text</p>
</body>
Multimedia
Image <img>
src attribute specifies the URL of the image
alt attribute is the text that described the image
<img src="https://www.bitdegree.org/doggo.jpg" alt="This text
describes image">
Navigation – organize – list of links like “home” and “contact”

Under <body>
<nav> identifies a section of navigational links on a page
<ul> identifies the unordered list
<li> specifies the list names
<a> identifies the hyperlink
<href> attribute identifies the destination of the link = hyperlink reference
URL value identifies the URL of the link
<nav>
<ul>
<li><a href="URL">Home</a></li>
<li><a href="URL">About</a></li>
<li><a href="URL">Contact</a></li>
</ul>
</nav>
<a> establishes hyperlinks

*</nav> and </ul> is important
*先 url（链接）后描述
Tables
<tables> create a table on the page, signifies the info that will be formatted as a table
<table> … </table>
Table row is defined by <tr> tag

<table>
<tr>...</tr>
<tr>...</tr>
</table>
Table data/cell is defined with the <td> tag, creates columns within a row
<table>
<tr>
<td>Name 1</td>
<td>Note 1</td>
<td>1</td>
</tr>
<tr>
<td>Name 2</td>
<td>Note 2</td>
<td>2</td>
</tr>
</table>
<th> designate headings for a column or row of cells, default bold and centered
<tr>
<th>First column header</th>
<th>Second column header</th>
<th>Third column header</th>
</tr>
<caption> add a heading, must be inserted immediately after <table>

<table>
<caption>Heading of the table</caption>
...
</table>
*very hard
<th></th>让字 bold = column header
Tr 建列，td 内容
Forms – feedback form

<form> identifies where on the page control elements will appear
<form>Starting the form</form>
Form elements have types of input elements, text fields, checkboxes,
radio buttons, submit buttons,etc
<input> primary element, uses type attribute to define what
type of info is to be captured. The most popular type attribute
value is text, denotes of a single line of text.

<input type="text" name="name">
<input type="date" name="birthday">
<input type="time" name="game-time">
<input type="email" name="email-address">
<input type="url" name="website">
<input type="number" name="cost">
<input type="tel" name="phone-number">
Placeholder attribute describes the expected value of an input field

<input placeholder="Your name" type="text" name="name">
<textarea> element use to capture text-based data and accept larger
passages than <input>, also resizable
<textarea name="comment">Add your comment here</textarea>
*input 和 placeholder 永远是一起的
Textarea 就是那个大框
Submission form – send

<input> - type attribute value of submit,value attribute decides the
text appears within the button
<input type="submit" name="submit" value="Send">
CSS
Styling a website
In text editor like notepad, and save it as a style sheet (mac 的脚本编辑器只能打 apple 自
己的 code 和 JavaScript)
File should not contain any HTML
Style sheet = .css and add as a link in head section of the HTML file
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Attribute type defines the content between <style> and </style>

Text/css = conent is CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS selector, properties & values

Selector block – points to the HTML element you want to style
Declaration block – contains one or more declarations separated by semicolons
Each declaration includes a CSS property (color and font-size) name and a value, separated by
colon
Selectors target an attribute value (id or class value) or type of element(<h1>or<p>)
p { ... }
h1 { … }
Then, a property determines the styles that will be applied to that element.
Background, color, font-size, height, and width
p{
color: blue;
font-size: 32px;
}
Here, color and font-size properties are applied to all <p> elements
*：显示内容
;=此段结束 =/xx 但是需要}
*不需要<>
*：后面需要空格
Font-size 中间这个-是必须
CSS Selectors
Identify which HTML elements are styled
Classified by type, class, and id
html elements can have tag name, and attributes

common attribute: class
<p class="brand">Sole Shoe Company</p>
Here, class attribute is set to brand, then we use the css selector
with class attribute, brand
.brand {
}
More than one class name can be added to HTML element’s class
attribute, i.e. if it needs to be green and bold
.green {
color: green;
}
.bold {
font-weight: bold;
}
And add multiple classes to an HTML element’s class attribute by separating them with a space
<h1 class="green bold"> ... </h1>
Id is for styling element uniquely

<h1 id="large-title"> ... </h1>
Use the id name with a #
#large-title {
}
*就是加在 html 里头那个<caption>啦什么的底下，写个 class=“title” 或者什么别的
Text styling & formatting
Font-family
Size
Weight
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Font-size keywords:
Pixels, em – units
Percentages, points
Font-style has 4 values

Normal – returns text to its normal style
Italic
Oblique
Inherit
.special {
font-style: italic;
}
Font-weight – numeric values and keyword

Normal, bold, bolder, lighter, and inherit
.daring {
font-weight: bold;
}
Background
Hex code
#6 hex values or 3 pairs of hex values
Background-color for solid background colors

div {
background-color: #b2b2b2;
}
Background-image + url () function,

div {
background-image: url("alert.png");
}
*要在 html 里写个东西才能进 css 是有特别 attribute 的，有的不用，写了东西的要加.

Styling tables
Border property
table, th, td {
border: 1px solid black;
}
Border-collapse property = whether table borders collapse into a single border
table {
border-collapse: collapse;
}
Width and height = change width and height
table {
width: 100%;
}
th {
height: 50px;
}
Text-align = horizontal alignment (left, right, or center) in row <th> or column <td>
th {
text-align: left;
}
Vertical-align = top, bottom, or middle in rows and columns (default is middle)
td {
height: 50px;
vertical-align: bottom;
}
Image positioning
Float property
None-default, doesn’t float
Left – floats to the left of its container
Right
Initial – sets this property to its default
Inherit – inherits this property from its parent element
img {
float: left;
max-width: 400px;
margin-right: 10px;
}
让图片变大变小变漂亮
Fixing – both html and CSS

Domain:
A zip file of website
2 files:
Index.html for default page
Style.css for CSS visual design
000webhost 上传两个文件（不是文件夹）

HTML Intro

Uploaded by

HTML Intro

Uploaded by

Html – hypertext markup language

Gives content structure and meaning

Html docs have required structure

Document type declaration, or <!DOCTYPE html>

Headings and paragraphs

<h1> element defines the most important heading

Navigation – organize – list of links like “home” and “contact”

<a> establishes hyperlinks

Table row is defined by <tr> tag

<caption> add a heading, must be inserted immediately after <table>

Forms – feedback form

Form elements have types of input elements, text fields, checkboxes,

radio buttons, submit buttons,etc

<input> primary element, uses type attribute to define what

type of info is to be captured. The most popular type attribute

value is text, denotes of a single line of text.

Placeholder attribute describes the expected value of an input field

Submission form – send

Attribute type defines the content between <style> and </style>

CSS selector, properties & values

html elements can have tag name, and attributes

Id is for styling element uniquely

Font-style has 4 values

Font-weight – numeric values and keyword

Background-color for solid background colors

Background-image + url () function,

*要在 html 里写个东西才能进 css 是有特别 attribute 的，有的不用，写了东西的要加.

Fixing – both html and CSS

You might also like