Download presentation
Presentation is loading. Please wait.
1
The past, the present, the future Telerik School Academy http://academy.telerik.com HTML, CSS and JavaScript
2
Hypertext Markup Language HTML Concepts HTML Document Structure HTML Common Elements Section Elements HTML Tables Semantic Structural Tags 2
3
3
4
HTML – Hyper Text Markup Language A notation for describing document structure (semantic markup) formatting (presentation markup) Looks (looked?) like: A Microsoft Word document The markup tags provide information about the page content structure A HTML document consists of many tags 4
5
An HTML document must have an.htm or.html file extension HTML files can be created with text editors: NotePad, NotePad ++, Sublime Text Or HTML editors (WYSIWYG Editors): Microsoft WebMatrix Microsoft Expression Web Microsoft Visual Studio Adobe Dreamweaver 5
6
1991 – HTML first mentioned – Tim Berners-Lee – HTML tags 1993 – HTML (first public version, published at IETF) 1993 – HTML 2 draft 1995 – HTML 2 – W3C 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final) 2000 – XHTML draft 2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML5 2022 – HTML5 – final specification 6
7
Tags, Attributes and Elements 7
8
Concepts in HTML Tags Opening tag and closing tag The smallest piece in HTML Attributes Properties of the tag Size, color, etc… Elements Combination of opening, closing tag and attributes
9
Tags are the smallest piece in HTML Document Start with " " Two kinds of tags Opening Mark the start of an HTML element Closing Mark the end of an HTML element Start in " </ " 9 <html><body> Hello Pesho! Hello Pesho! </body></html> Opening tag Closing tag Opening tag Closing tag
10
Attributes are properties of HTML Elements Used to set size, color, border, etc… Put directly in the tags Has value surrounded by " " or ' ' The value is always a string 10 go to Google go to Google Some tags don't have closing tag
11
There are some attributes that are common for every HTML element Id, class, name, style And some attributes are specific For example the attribute src of the img element Shows the path to the image to be shown 11
12
HTML Elements are combination of tags and attributes Opening tag with some or none attributes and a closing tag 12 go to Google go to Google <html>…</html>
13
Live Demo 13
14
HTML Document, Doctype, Head, Body 14
15
Some elements are essential to each HTML Document: html, head, body, doctype The html element Used to mark the beginning and ending of a HTML document All the content of the web page is inside this tag 15 <html> …</html>
16
The head tag contains markup that is not visible to the user (i.e. the person using the browser) But helps the browser to render correctly the HTML document What is in there? Styles, scripts Declare encodings Etc.. The title tag - the text in the tab of a browser 16
17
body element contains all the visible to the user markup Headings, text, hyperlinks, images, etc… Textboxes, sliders, buttons… Doctype is kind of the validator of the page Tells the browser in which version of HTML the page is written HTML 5 Doctype 17
18
Live Demo 18
19
Used in 90% of all the sites
20
Text formatting tags modify the text between the opening tag and the closing tag Ex. Hello makes "Hello" bold bold italicized underlined Sample superscript Sample subscript strong emphasized Preformatted text 20 Many of the formatting tags are deprecated Use CSS instead
21
Hyperlink Tags Image Tags Text formatting tags 21 <a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized.
22
Heading Tags (h1 – h6) Paragraph Tags Sections: div and span 22 This is my first paragraph This is my first paragraph This is my second paragraph This is my second paragraph Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 This is a div This is a div
23
a.Apple b.Orange c.Grapefruit Create an Ordered List using : Attribute values for type are 1, A, a, I, or i 23 1.Apple 2.Orange 3.Grapefruit A.Apple B.Orange C.Grapefruit I.Apple II.Orange III.Grapefruit i.Apple ii.Orange iii.Grapefruit Apple Apple Orange Orange Grapefruit Grapefruit </ol>
24
Create an Unordered List using : Attribute values for type are: disc, circle or square 24 Apple Orange Pear o Apple o Orange o Pear Apple Orange Pear Apple Apple Orange Orange Grapefruit Grapefruit </ul>
25
Create definition lists using Create definition lists using Pairs of text and associated definition; text is in tag, definition in tag Renders without bullets Definition is indented 25 <dl><dt>HTML</dt> A markup language … A markup language … <dt>CSS</dt> Language used to … Language used to … </dl>
26
Live Demo
27
The and The The and The
28
creates logical divisions within a page Block element Used with CSS Example: 28 DIV example DIV example This one is only a test. This one is only a test.
29
Live Demo
30
Inline style element Useful for modifying a specific portion of text Don't create a separate area (paragraph) in the document Mainly used to style parts of a text 30 This one is only a test. This one is only a test. This one is another TEST. This one is another TEST.
31
Live Demo
33
Tables represent tabular data A table consists of one or several rows Each row has one or more columns Tables are comprised of several core tags: : begin/end table definition : create a table row : create tabular data (cell) Tables should not be used for layout Use CSS floats and positioning styles instead 33
34
34 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
35
Live Demo
36
Two kinds of cells in HTML tables Data cells – containing the table data Header cells – used for the column names or some more important cells Why two kinds of cells? Used to semantically separate the cells <tr> Full Name Mark Full Name Mark </tr><tr> Doncho Minkov Very good (5) Doncho Minkov Very good (5) </tr><tr> Georgi Georgiev Exellent (6) Georgi Georgiev Exellent (6) </tr>
37
Live Demo
38
With Header, Footer and Body
39
Table rows split into three semantic sections: header, body and footer denotes table header and contains elements, instead of elements denotes collection of table rows that contain the very data denotes table footer but comes BEFORE the tag and define columns (used to set column widths) 39
40
40 <table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> header footer Last comes the body (data) th columns
41
<table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> 41 table-full.html Although the footer is before the data in the code, it is displayed last
42
Live Demo
43
Tables in Tables in Tables in Tables…
44
Table "cells" ( ) can contain nested tables (tables within tables): 44 <table> Contact: Contact: First Name First Name Last Name Last Name </table> nested-tables.html
45
Live Demo
46
With Padding, Spacing and Stuff
47
cellpadding Defines the empty space around the cell content cellspacing Defines the empty space between cells Tables have two attributes related to space 47 cellcell cellcell cell cell cell cell
48
48 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
49
49 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
50
Live Demo
51
How to Make a Two-Cells Column or Row?
52
rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Cells have two attributes related to merging 52 cell[1,1]cell[1,2] cell[2,1] colspan="1"colspan="1" colspan="2" cell[1,1]cell[1,2] cell[2,1] rowspan="2"rowspan="1" rowspan="1"
![ rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Cells have two attributes related to merging 52 cell[1,1]cell[1,2] cell[2,1] colspan= 1 colspan= 1 colspan= 2 cell[1,1]cell[1,2] cell[2,1] rowspan= 2 rowspan= 1 rowspan= 1](http://images.slideplayer.com./26/8376115/slides/slide_52.jpg " rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Cells have two attributes related to merging 52 cell[1,1]cell[1,2] cell[2,1] colspan= 1 colspan= 1 colspan= 2 cell[1,1]cell[1,2] cell[2,1] rowspan= 2 rowspan= 1 rowspan= 1")
53
53 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html
![53 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html](http://images.slideplayer.com./26/8376115/slides/slide_53.jpg "53 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html")
54
54 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
![54 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]](http://images.slideplayer.com./26/8376115/slides/slide_54.jpg "54 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]")
55
Live Demo
57
A sample layout structure of a Web Page
58
Using divs with IDs The IDs are needed for styling 58 <html> … … <body> </body></html>
59
Live Demo 59
60
In HTML 5 there are semantic tags for layout ,,, ,,, Work only on newer browsers 60 <html> … … <body> </body></html>
61
Live Demo
62
It is important to have the correct vision and attitude towards HTML HTML is only about structure, not appearance Browsers tolerate invalid HTML code and parse errors – you should not Always think about semantics The W3C HTML Validator is a way to validate your HTML http://validator.w3.org/ http://validator.w3.org/ 62
63
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране http://html5course.telerik.com
64
1. Write an HTML page like the following: * Use headings, divs, paragraphs and ul 64
65
2. Write an HTML page like the following: 65
66
3. Create an user profile Web page profile.html, friends page named friends.html and info page named home.html. Link them to one another using tag 66
67
67 1. Create Web Pages like the following using tables: 2. Create a Web Page like the following using forms:
68
3. Create a Calculator-like table. You should use a HTML 5 form for the Calculator Buttons for all the numbers and operators (+, -, etc.) Textbox for the result Do not make the same styles as the example 68
Similar presentations
