WEB DESIGN -LECTURE NOTES (AND BOOK)
Vivien Christian Cahyadi [0331241]
Web Design
First we were introduced about the internet, it's history, and how it came about. One of its major contributor is Tim Berners Lee.
Then, through a group discussion we identified what makes a good and bad design.
HTML ELEMENT
An html element consists of a start and end tag with the content in between.
<p>Hello World </p>
<p> is the opening tag and </p> is the closing tag
attributes
CSS (cascading style sheets)
Anatomy of css :
There are three types of how we can apply css : inline, embedded/internal and external.
inline css : inserted in the tag itself ex. <h3 style="color:#FFF"> Hello </h3>
internal /embedded css : the css is defined in the head section
ex.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>inline css</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
external css :
external style sheet defined in a separate, hence external, file. Applies to all pages that link to the external style sheet.
to link the css, use
<link rel="stylesheet" href="the css directory ex. css/style.css" type="text/css"/>
in the head section
ANCHOR PSEUDO-CLASSES
a:link = unvisited link
a:visited = visited link
a:hover = mouse over link
a:active = selected link
BLOCK AND INLINE ELEMENTS
block
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
we can also assign width to a block element.
inline
<input> tag configures a text box. The tex box form control accepts text or numeric information such as names, e-mail addresses, phone numbers, and other text. Common input element attributes for text boxes are listed below :
type = (value : text) configures a text box
name = (value : alphanumeric, no spaces, begins with letter) Names the form element so that it can be easily accessed by client-side scripting languages such as Javascript or by server-side processing. The name should be unique.
id = (Alphanumeric, no spaces, begins with a letter) provides a unique identifier for the form element.
size = (numeric value) configures the width of the text box as displayed by the browser, if size is omitted, the browser displays the text box with its own default size.
max length = (numeric value) configures the maximum length of data accepted by the text box.
value = (text or numeric characters)
assigns an initial value to the text box that is displayed by the browser; accepts information typed in the text box; this value can be accessed by client-side scripting languages and by server-side processing
disabled = (disabled) form control is disabled
readonly = (readonly) form control is for display; cannot be edited.
autocomplete = (on) HTML5 attribute ; default ; browser will use autocomplete to fill the form control
(off) HTML5 attribute; browser will not use autocomplete to fill the form control.
autofocus = (autofocus) HTML 5 attribute; browser places cursor in the form control and sets the focus
list = (datalist element id value) HTML 5 attribute; associates the form control with a datalist element
Web Design
Lecture Notes
Unfortunately I didn't really took note of the lecture so I will write whatever I remembered.
First we were introduced about the internet, it's history, and how it came about. One of its major contributor is Tim Berners Lee.
Then, through a group discussion we identified what makes a good and bad design.
HTML ELEMENT
An html element consists of a start and end tag with the content in between.
<p>Hello World </p>
<p> is the opening tag and </p> is the closing tag
attributes
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"
Some examples of attributes are href, class, id and style.
Class attribute :
specifies one or more classnames for an element (multiple elements can have the same class name)
id attribute :
gives a unique name to the element (only one element has that id)
<a> href attribute:
specifies the URL of the page the link goes to.
style attribute:
to insert inline css
specifies one or more classnames for an element (multiple elements can have the same class name)
id attribute :
gives a unique name to the element (only one element has that id)
<a> href attribute:
specifies the URL of the page the link goes to.
style attribute:
to insert inline css
CSS (cascading style sheets)
Anatomy of css :
There are three types of how we can apply css : inline, embedded/internal and external.
inline css : inserted in the tag itself ex. <h3 style="color:#FFF"> Hello </h3>
internal /embedded css : the css is defined in the head section
ex.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>inline css</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
external css :
external style sheet defined in a separate, hence external, file. Applies to all pages that link to the external style sheet.
to link the css, use
<link rel="stylesheet" href="the css directory ex. css/style.css" type="text/css"/>
in the head section
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
a:link = unvisited link
a:visited = visited link
a:hover = mouse over link
a:active = selected link
BLOCK AND INLINE ELEMENTS
block
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
we can also assign width to a block element.
inline
An inline element does not start on a new line and only takes up as much width as necessary.
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
Book Study
type = (value : text) configures a text box
name = (value : alphanumeric, no spaces, begins with letter) Names the form element so that it can be easily accessed by client-side scripting languages such as Javascript or by server-side processing. The name should be unique.
id = (Alphanumeric, no spaces, begins with a letter) provides a unique identifier for the form element.
size = (numeric value) configures the width of the text box as displayed by the browser, if size is omitted, the browser displays the text box with its own default size.
max length = (numeric value) configures the maximum length of data accepted by the text box.
value = (text or numeric characters)
assigns an initial value to the text box that is displayed by the browser; accepts information typed in the text box; this value can be accessed by client-side scripting languages and by server-side processing
disabled = (disabled) form control is disabled
readonly = (readonly) form control is for display; cannot be edited.
autocomplete = (on) HTML5 attribute ; default ; browser will use autocomplete to fill the form control
(off) HTML5 attribute; browser will not use autocomplete to fill the form control.
autofocus = (autofocus) HTML 5 attribute; browser places cursor in the form control and sets the focus
list = (datalist element id value) HTML 5 attribute; associates the form control with a datalist element
Comments
Post a Comment