Download presentation
Presentation is loading. Please wait.
1
Length Of Course: 36 hours
CT250: HTML & HTML5 ECTS: = 36/25-30 Length Of Course: 36 hours Prerequisites: CT 100 Trial Month HTML & HTML5 To view this presentation, first, turn up your volume and second, launch the self-running slide show.
2
Week 1 Day 1 To view this presentation, first, turn up your volume and second, launch the self-running slide show.
3
HTML Introduction To view this presentation, first, turn up your volume and second, launch the self-running slide show. HTML : HYPER TEXT MARKUP LANGUAGE - HTML is a Document That Contains Text - Web Browsers Read and Display Documents That Contain HTML
4
HTML Introduction (Cont.)
To view this presentation, first, turn up your volume and second, launch the self-running slide show. <> : Angle Brackets Contain Tag <html>Something</html> : Markup Element
5
- Editors - Starting Basic - Elements
HTML Tags, Elements and their Usage - Editors - Starting Basic - Elements Presentations are a powerful communication medium.
6
HTML Editor Netbeans 8.0: Java Development Kit 8 (JDK): Notepad++: Sublime Text Editor: To view this presentation, first, turn up your volume and second, launch the self-running slide show.
7
HTML Starting Basic <! DOCTYPE html> <html> <head> <title>HTML Session 1</title> </head> <body> <h1>Hello! Students</h1> </body> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
8
- Attributes - Headings - Paragraphs
HTML Tags, Elements and their Usage (Cont.) - Attributes - Headings - Paragraphs Presentations are a powerful communication medium.
9
HTML Attributes, Headings & Paragraphs
<! DOCTYPE html> <html lang=“en-US”> <head> <title>HTML Session 1</title> <meta charset="UTF-8"> </head> <body> <h1>Hello! Students</h1> <hr> <p title=“Biography of Rifat”>Rifat completed his B.Sc. in EEE from United International University (UIU). Currently he studies PGD in ICT (IICT Department) at BUET. He has also completed four professional courses from Basis, BDJOBS Training & Talha Training on Laravel Framework, Wordpress Customization, Object Oriented Programming (OOP), and PHP CodeIigniter (CI) Framework for Web Applications etc. </p> </body> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
10
- Styles - Formatting - Quotations
HTML Tags, Elements and their Usage (Cont.) - Styles - Formatting - Quotations Presentations are a powerful communication medium.
11
HTML Styles <! DOCTYPE html> <html> <head> <title>HTML Session 1</title> </head> <body bgcolor=“white”> <h1 style=“text-align: center”>Hello! Students</h1> </body> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
12
HTML Formatting & Quotations
<! DOCTYPE html> <html lang=“en-US”> <head> <title>HTML Session 1</title> <meta charset="UTF-8"> </head> <body> <h1>Hello! Students</h1><hr> <p title=“Biography of Rifat”> <b>Name: </b> <em>Rifat</em><br> <strong>Designation:</strong> <i>Mentor</i> </p> <p><mark>This is</mark> <q>HTML Formatting</q></p> </body> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
13
- Comments - HTML CSS - Links & Images
HTML Tags, Elements and their Usage (Cont.) - Comments - HTML CSS - Links & Images Presentations are a powerful communication medium.
14
HTML Comments <! DOCTYPE html> <html> <head> <title>HTML Session 1</title> </head> <!-- Start Body Tag --> <body bgcolor=“white”> <h1 style=“text-align: center”>Hello! Students</h1> </body> <!-- Ending Body Tag --> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
15
HTML CSS <! DOCTYPE html> <html> <head> <title>HTML Session 1</title> <style> body{ background-color: oldlace; font-family: arial; font-size: 12px; } </style> </head> <!-- Start Body Tag --> <body> <h1 style=“text-align: center”>Hello! Students</h1> </body> <!-- Ending Body Tag --> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
16
HTML Links & Images <! DOCTYPE html> <html> <head> <title>HTML Session 1</title> </head> <body> <h1 >Hello! Students</h1> <p>This Layout was Design by <a href=“ CodersTrust Bangladesh</a> </p> <p><img src=“logo.gif" alt=“CodersTrust Bangladesh"></p> </body> </html> To view this presentation, first, turn up your volume and second, launch the self-running slide show.
17
HTML Tags, Elements and their Usage (Cont.)
- Tables - Lists Presentations are a powerful communication medium.
18
HTML Tables tr = Table Row td = Table Data th = Table Heading
<! DOCTYPE html> <html> <head> <title>HTML Session 2</title> </head> <body > <h1 >Product Category</h1> <table> <tr> <th>Product Name</th> <th>Price</th> <tr> <tr> <td>Dell Computer</td> <td>$250</td> <tr> </table> </body> </html> tr = Table Row td = Table Data th = Table Heading To view this presentation, first, turn up your volume and second, launch the self-running slide show.
19
HTML Tables (Cont.) colspan rowspan
<! DOCTYPE html> <html> <head> <title>HTML Session 2</title> </head> <body > <h1 >Product Category</h1> <table> <tr> <th>Product Name</th> <th colspan="2" >Price</th> <tr> <tr> <td>Dell Computer</td> <td>$250</td> <td>$350</td> <tr> </table> </body> </html> colspan rowspan To view this presentation, first, turn up your volume and second, launch the self-running slide show.
20
HTML Ordered & Unordered Lists
<! DOCTYPE html> <html> <head> <title>HTML Session 2</title> </head> <body > <h1 >Ordered & Unordered Lists</h1> <!-- Unordered List Start --> <ul> <li> Name </li> <li> Designation </li> </ul> <!-- Unordered List End--> <!-- Ordered List Start --> <ol> <li> Name </li> <li> Designation </li> </ol> <!-- Ordered List End--> </body> </html> Unordered List Ordered List <ul> <ol> <li> </li> li = List Item To view this presentation, first, turn up your volume and second, launch the self-running slide show.
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
