HTML Walkthrough Internship Course

1
HTML WALKTHROUGH
ISZLAI ZOLTAN, SEPTEMBER 2019

2
2
AGENDA
 INTRODUCTION
 BASICS
 DOM AND SEMANTICS
 FORMATTING
 IMAGES
 LISTS
 FORMS
 TABLES
 SURPRISE

3
3
3
INTRODUCTION
INTRO
 HTML is the structure, the bare bones of the car
 CSS is the styling and the paintjob of a car
 JS is like the engine of the car, which adds life to the car

4
4
4
BASICS
INTRO
 HTML is the standard Hyper Text Markup Language for creating
Web pages
 HTML tags are element names surrounded by angle brackets
DOCTYPE & ELEMENTS
 <!DOCTYPE html>
 <p> This is a paragraph </p>
HTML ATTRIBUTES
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name, value pairs

5
5
5
FORMATTING
INTRO
 Formatting is used to describe different type of texts

6
6
6
BLOCKS
DIV
 <div> is a block level element and it’s often used as a container
 The <div> most commonly uses style, class and id attributes
SPAN
COMMENTS
 <span> are inline elements
 Example: <span class=“special” style=“color:pink”>Tomas</span>

7
7
7
DOM AND SEMANTICS
 Semantic elements add meaning to the container
 Instead of adding <div> elements and class attributes to them
we use newer HTML 5 elements
INTRO
DIVITUS AND CLASSITUS
 Divitus means overusing div’s instead of using semantic
elements
 Classitus means, overusing classes instead of using semantic
elements

8
8
8
DOM AND SEMANTICS
INTRO
 This is called the DOM structure, where we define our HTML
structure
 The document object model is a tree structure which define the
relationships between different elements

9
9
9
IMAGES
INTRO
 <img> element is self-closing, it contains attributes only
 The src attribute specifies the URL of the image
 The value of the alt attribute should describe the image
 The alt attribute provides an alternate text for an image
 If a browser cannot find an image, it will display the alt attribute
EXAMPLE

10
10
10
LISTS
INTRO
 An unordered list starts with the <ul> tag and contains <li>
 An ordered list starts with the <ol> tag and contains <li>
 A definition list start with <dl> and contains <dt> <dd>
 The CSS list-style-type property is used to define the style of the list
item marker
EXAMPLE LIST-SYLE-TYPE’S

11
11
11
FORMS
INTRO
 The <form> element is the container of the form
 The <fieldset> element is used to group related data in a form
 The <legend> element defines a caption for the <fieldset> element
OTHER ELEMENTS SEEN
 The <input type=“text”> element for text
 The <label> element defines a label for each element
 The <select> element for choosing elements from a list
 The <input type=“submit”> element for submit button
 The <textarea> element with defines a text area

12
12
12
FORMS
INTRO
 The <input> element with the type attribute
 The <select> element defines a drop-down list
OTHER INPUT TYPES

13
13
13
FORMS
INTRO
 The <textarea> element defines a multi-line input field (a text area):
 The <button> element defines a clickable button
BROWSER DISPLAY

14
14
14
FORMS
INTRO
 <input type="radio"> defines a radio button.
 <input type="checkbox"> defines a checkbox.
BROWSER DISPLAY

15
15
15
TABLES
INTRO
 A table is defined with the <table> tag
 Each table row is defined with the <tr> tag
 A table header is defined with the <th> tag
 A table data/cell is defined with the <td> tag
BROWSER DISPLAY

16
16
16
TABLES
INTRO
 Scrum understands, that a problem can’t be fully understood, or
described, so it concentrates on the team instead
 With fast development we answer the questions which popup for
future requirements by the client
EXAMPLES
 table, th, td { border: 1px solid black; }
 table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 15px; }

HTML Walkthrough Internship Course

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML Walkthrough Internship Course

Similar to HTML Walkthrough Internship Course (20)

More from Zoltan Iszlai

More from Zoltan Iszlai (16)

Recently uploaded

Recently uploaded (20)

HTML Walkthrough Internship Course