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

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Intro

Uploaded by

Copyright:

Available Formats

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