HyperTextMarkUpLanguageBasicsForWebTechnologies.pptx

Web Technologies

1. HTML -Hyper text markup language

2. What is so special about HTML Q) Why every web developer choose HTML as their markup language although we have lot of markup languages like XML,SGML? A)We can easily insert CSS and JAVASCRIPT files in HTML Hyper Text Markup Language -As the name suggests both we can include links and Markup Language Link🤔 You may think a google link yeah it is a google links or we can include a link to another HTML file and CSS and Javascript files

3. BASIC STRUCTURE OF HTML: HTML Head Body Paragraph Tags Heading Tags LINK Tags TITLE Tags

4. HEAD AND BODY HEAD consists the link to the other files like CSS Head contains title of the web pages Head contains the viewport (to look in the other devices) Head contains to include CSS libraries like BOOTSTRAP Body consists the data to represent in the web page Body part includes the script tag which includes the javascript file

5. Tags in HTML: As you may listened this lot more times in the previous slides you may get the doubt what is meant by a Tag 🤔 A tag is like a if keywords in C lang it is like there are lot of tags in HTML So we discuss about basic tags in the HTML Because i am not aware of every tag 😅 <h1> ,<p> , <div>, <a>

6. BASIC STRUCTURE OF A SIMPLE HTML PAGE: <! DOCTYPE html > < html lang = "en" > <!--A comment in HTML--> > < head > < title > HEllO </ title > < style > include CSS</ style > </ head > < body > Hello World! < script > INCLUDE JAVA SCRIPT</ script > </ body > </ html >

7. TAGS : Every tag has a closing tag Eg: <h1>Heading One </h1> And there are some self closing tags <hr/>,<br/>,<img/> So we About these tags in next slides

8. Headings Name itself declares a tag <h1>Hello</h1> < h1 > Hello </ h1 > < h2 > Hello </ h2 > < h3 > Hello </ h3 > < h4 > Hello </ h4 > < h5 > Hello </ h5 > < h6 > Hello </ h6 > We can also increase the numbers greater than 7 but it looks like an normal text

9. Lists: <ol> <ul> <li>Hello</li> <li> Hello</li> <li>HELP</li> <li>Help</li> </ol> </ul> LISTS UNORDERED LIST ORDERED LIST

10. Tables: To organize the data in the WEBPAGE we use tables like in SQL There are lot of tags in the <table></table> creates a table <tr></tr> table rows <th></th>table head (name of the column) <td></td>table data(to include data)

11. < table > < tr > < th > NAMES < /th > < th > DATA < /th > < /tr > < tr > < td >MARIE< /td > < td > VIVEK < /td > < /tr > < tr > < td >18< /td > < td >18< /td > < /tr > < /table >

12. DIVISION AND PARAGRAPH TAGS: <div>The div tag is used to include some tags inside it or it divides the data with others <p> The paragraph tag is used to include some writing part inside it In that we can include <b> bold tag <i> italic tag <u> under line tag <code> to represent some code in that tag

13. Image Tag and iframe tag: The image tag is used to insert the image in the html page < img src = "rose.png" alt = "rose" height = "150px" width = "125px" > < img src = "https://www.shutterstock.com/image-photo/view-visakhapatnam-dolphins-nose-visakha-260nw-1095079250.jpg" alt = "beach" height = "125px" width = "200px" > Iframe tag is used to include another html page in one html page To include a website link also

14. Anchor tag: The anchor tag is used to create a hyperlink

15. Attributes in HTML: The attributes in the HTML gives special beauty and limits to the HTML tags Like we see in before img tag contain src height width Soo these are the attributes to the html

16. Classes and Id’s: As div tag is used to divide the description with others div s description DrawBack: As the every div tag name is div there is no uniqueness in the To overcome this problem we use classes and id We can name a div tag like this < div class = "Ses" ></ div > < div id = "sd" ></ div > These classes and id s are used in the css to colour this part