Download presentation
Presentation is loading. Please wait.
1
2017, Fall Pusan National University Ki-Joune Li
HTML 5 2017, Fall Pusan National University Ki-Joune Li
2
Making HTML documents Editing Tools Validator
Notepad++: atom: Sublime Text: Validator
3
First HTML5 First HTML5 Example
<!DOCTYPE html> declaration defines this document to be HTML5 <html> element is the root element of an HTML page <head> element contains meta information about the document <title> element specifies a title for the document <body> element contains the visible page content <h1> element defines a large heading <p> element defines a paragraph <!-- xxxx --> comments
4
HTML Page Structure
5
Basic Examples https://www.w3schools.com/html/html_basic.asp Headings
From <h1> … </h1> to <h6> … </h6> HTML Links – point to a URL <a href=" is a link</a> <a mail to prof. Li</a> HTML Images – to include image <img src="w3schools.jpg" alt="W3Schools.com" width="104"height="142" > Attributes
6
HTML Attributes https://www.w3schools.com/html/html_attributes.asp
Lang Attribute - <html lang=“en-US”> Title Attribute href Attribute - <a href=" is a link</a> Size Attribute - <img src="w3schools.jpg" width="104" height="142“> Alt Attribute Void Elements – element with only attributes without markup text <img src="w3schools.jpg" width="104" height="142“/> 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“
7
HTML Attributes Images as a link (hypertext)
8
HTML head element The HTML <head> element has nothing to do with HTML headings. The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. <head> element is placed between the <html> tag and the <body> tag In head element, <title>, <style>, <meta>, <link>, <script>, and <base> <title> defines a title in the browser tab provides a title for the page when it is added to favorites displays a title for the page in search engine results <style> - used to define style information for a single HTML page: <link> - used to link to external style sheets
9
HTML head element <meta>- used to specify which character set is used, page description, keywords, author, and other metadata. Character set: <meta charset="UTF-8"> web page description: <meta name="description" content="Free Web tutorials"> keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, JavaScript"> the author of a page: <meta name="author" content="John Doe"> Refresh document every 30 seconds <meta http-equiv="refresh" content="30">
10
Special Characters Reserved Characters in HTML
Example: instead of the less than (<) sign, we must write < or < Non-breaking space ( ): enforces real spaces Special Characters Result Description Entity Name Entity Number non-breaking space < less than < > greater than > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' cent pound yen € euro € € copyright registered trademark
11
Combining Diacritical Marks
Character Construct Result ̀ a à à ́ á á ̂ â â ̃ ã ã O Ò Ò Ó Ó Ô Ô Õ Õ
12
Symbols Char Number Entity Description ∀ ∀ ∀ FOR ALL ∂
∂ ∂ PARTIAL DIFFERENTIAL ∃ ∃ ∃ THERE EXISTS ∅ ∅ ∅ EMPTY SETS ∇ ∇ ∇ NABLA ∈ ∈ ∈ ELEMENT OF ∉ ∉ ∉ NOT AN ELEMENT OF ∋ ∋ ∋ CONTAINS AS MEMBER ∏ ∏ ∏ N-ARY PRODUCT Α Α Α GREEK CAPITAL LETTER ALPHA Β Β Β GREEK CAPITAL LETTER BETA Γ Γ Γ GREEK CAPITAL LETTER GAMMA Δ Δ Δ GREEK CAPITAL LETTER DELTA Ε Ε Ε GREEK CAPITAL LETTER EPSILON Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
13
Other Symbols Currency: Arrows: All Symbols:
14
Formatting Elements Formatting elements <b> - Bold text
<strong> - Important text <i> - Italic text <em> - Emphasized text <mark> <small> - Small text <del> - Deleted text: <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text <abbr> - abbreviations
15
Lists Ordered vs. Unordered Lists
With CSS list-style-type property With type attribute for ordered list Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers
16
Lists - Others Description List
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term Nested List -
17
Tables Border HTML provides <table> tag.
table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. Border Border line - or Alignments Spanning many rows or columns Captions
18
Table – HTML 4.0.1 vs. HTML 5 align left center right
Not supported in HTML5. Specifies the alignment of a table according to surrounding text bgcolor rgb(x,x,x) #xxxxxx colorname Not supported in HTML5. Specifies the background color for a table border 1 0 Not supported in HTML5. Specifies whether or not the table is being used for layout purposes cellpadding pixels Not supported in HTML5. Specifies the space between the cell wall and the cell content cellspacing Not supported in HTML5. Specifies the space between cells frame void above below hsides lhs rhs vsides box border Not supported in HTML5. Specifies which parts of the outside borders that should be visible
19
Table – HTML 4.0.1 vs. HTML 5 rules none groups rows cols all
Not supported in HTML5. Specifies which parts of the inside borders that should be visible sortable Specifies that the table should be sortable summary text Not supported in HTML5. Specifies a summary of the content of a table width pixels % Not supported in HTML5. Specifies the width of a table
20
Forms The HTML <form> element defines a form that is used to collect user input Example - <input> element with type attribute, for example with name attribute Type Description <input type="text"> Defines a one-line text input field <input type="radio"> Defines a radio button (for selecting one of many choices) <input type="submit"> Defines a submit button (for submitting the form)
21
Form – More Elements <select> element – drop-down element
selected attribute <textarea> element – multi-line input field <datalist> element – specifies predefined options for input element
22
Form – Action Attribute
action attribute defines the action to be performed when the form is submitted. Normally the form data is sent to the web server when user clicks on submit button Server is specified by action attribute e.g. /action_page.php (server side script) that handles the form data GET/POST HTTP method GET (default) – submitted data is in the page address field (visible) POST – submitted data is in a separate field (not in the page address field, invisible)
23
Form – Form Attributes Attribute Description accept-charset
Specifies the charset used in the submitted form (default: the page charset). action Specifies an address (url) where to submit the form (default: the submitting page). autocomplete Specifies if the browser should autocomplete the form (default: on). enctype Specifies the encoding of the submitted data (default: is url-encoded). method Specifies the HTTP method used when submitting the form (default: GET). name Specifies a name used to identify the form (for DOM usage: document.forms.name). novalidate Specifies that the browser should not validate the form. target Specifies the target of the address in the action attribute (default: _self).
24
Input Types HTML allows several input types reset Input Restrictions
text (default) radio checkbox reset alert More input types color date, month number range search tel time url week Input Restrictions Attribute Description disabled Specifies that an input field should be disabled max Specifies the maximum value for an input field maxlength Specifies the maximum number of character for an input field min Specifies the minimum value for an input field pattern Specifies a regular expression to check the input value against readonly Specifies that an input field is read only (cannot be changed) required Specifies that an input field is required (must be filled out) size Specifies the width (in characters) of an input field step Specifies the legal number intervals for an input field value Specifies the default value for an input field
25
Links Allows to jump to another document or a specific part
HTML links – (absolute URL) <a href=" our HTML tutorial</a> Local Links – <a href="html_images.asp">HTML Images</a> (relative URL) Target Attributes _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame Bookmark - HTML bookmarks are used to allow readers to jump to specific parts of a Web page. <h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a> example
26
Blocks block level elements vs. inline elements
Block Level Elements: <div>, <h1> - <h6>, <p>, and <form> Starts on a new line Takes up the full width available Inline Elements: <span>, <a>, <img> Does not start on a new line and Takes as much width as necessary div with class – define equal styles for elements with the same class name examples
27
Responsive Web Design Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen: Using W3.CSS - example desktop tablet smart phones
28
HTML Layout Websites often display content in multiple columns (like a magazine) HTML5 offers new semantic elements that define the different parts of a web page A Common Layout Four Ways to create HTML Layout HTML tables – DO NOT USE CSS float property CSS framework CSS flexbox <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element
Similar presentations
