Movatterモバイル変換

Presented by:Deepuranjan KumarMCA 2ndYearMUR2301159

Introduction to webtechnologiesHTML + CSS +Javascript

GoalsIntroduction to webtechnologies:● HTML to create thedocument structure andcontent● CSS to control is visualaspect● Javascript for interactivity

HTMLHTML means Hyper Text MarkupLanguage.The HTML allow us to define the structure of a documentor a website.HTML is NOT a programming language, it’s a markuplanguage, which means its purpose is to give structure tothe content of the website, not to define an algorithm.Here is an example of tags:<title>This is a title</title>The HTML defines the page structure. A website can haveseveral HTMLs to different pages.<html><head></head><body><div><p>Hi</p></div></body></html>

HTML: syntax example<div id="main">This is text without atag.<button class="mini">pressme</button><imgsrc="me.png" /></div>Tagname attributescommenttexttagself-closingtag

Although there are lots of tags in the HTML specification, 99% of the webs use asubset of HTML tags with less that 10 tags, the most important are:● <div>: a container, usually represents a rectangular area with information inside.● <img/>: an image● <a>: a clickable link to go to another URL● <p>: a text paragraph● <h1>: a title (h2,h3,h4 are titles of less importance)● <input>: a widget to let the user introduce information● <style> and <link>: to insert CSS rules● <script>: to execute Javascript● <span>: a null tag (doesn't do anything), good for tagging infoHTML: main tags

HTML: other interesting tagsThere are some tags that could be usefulsometimes:● <button>: to create a button● <audio>: for playing audio● <video>: to play video● <canvas>: to draw graphics from javascript● <iframe>: to put another website inside ours

CSSCSS allows us to specify how topresent (render) the document infostored in the HTML.Thanks to CSS we can control all theaspects of the visualization and someother features:● Colors: content, background,borders● Margins: interior margin,exterior margin● Position: where to put it● Sizes: width, height● Behaviour: changes on mouseover

CSS example* {color: blue; /*a comment*/ margin: 10px;font: 14px Tahoma;}This will change all the tags in my web ( ‘*‘ means all) to look blue with font Tahomawith 14px, and leaving a margin of 10px around.

How to add CSS ?There are three ways to add CSS to your website:● Using a style tag in Internal CSS<style>p { color: blue }</style>● Referencing an external CSS<link href="style.css"rel="stylesheet" />● Using the attribute style on a tag (inline)<p style="color: blue; margin: 10px">…</p>

CSS PropertiesHere is a list of the most common CSS fields and an example:● color: #FF0000; red; rgba(255,00,100,1.0); //different ways tospecify colors● background-color: red;● background-image: url('file.png');● font: 18px 'Tahoma';● border: 2px solid black;● border-top: 2px solid red;● border-radius: 2px; //to remove corners and make them more round● margin: 10px; //distance from the border to the outer elements● padding: 2px; //distance from the border to the inner elements● width: 100%; 300px; 1.3em; //many different ways to specifydistances● height: 200px;● text-align: center;● box-shadow: 3px 3px 5px black;● cursor: pointer;● display: inline-block;● overflow: hidden;

CSS SelectorsYou can also specify tags by its context, for example: tags that are inside of tagsmatching a selector. Just separate the selectors by an space:div#main p.intro { ... }This will affect to the p tags of class intro that are inside the tag div of id main<div id="main"><p class="intro">....</p> ← Affects this one</div><p class="intro">....</p>← but not this one

Box ModelIt is important to note that by default anywidth and height specified to an elementwill not take into account its margin, so adiv with width 100px and margin 10px willmeasure 120px on the screen, not 100px.This could be a problem breakingyour layout.You can change this behaviour changingthe box model of the element so thewidth uses the outmost border:div { box-sizing: border; }

LayoutOne of the hardest parts of CSS isconstruing the layout of your website(the structure inside the window) .By default HTML tends to puteverything in one column, which is notideal.There has been many proposals in CSSto address this issue (tables, fixed divs,flex, grid, …).

FlexboxThe first big proposal to address thelayout was the flexbox model.This model allows to arrange stuff inone direction (vertically orhorizontally) very easily.You can even choose to arrange fromright to left (reverse).It can also be used to arrange a seriesof elements in different rows.Check the tutorial for moreinfo.HTML<div class="box"><div>One</div><div>Two</div><div>Three<br>first line<br>second line</div></div>CSS.box {display: flex;}

JavascriptA regular programming language, easy to start,hard to master.Allows to give some interactivity to the elements on theweb.Syntax similar to C or Java but with notypes.You can change the content of the HTML or the CSSapplied to an element.You can even send or retrieve information from theinternet to update the content of the web withoutreloading the page.var my_number = 10;function say( str ){console.log( str);}say("hello");

Javascript example<html><body><h1>This is a title</h1><script>var title = document.querySelector("h1");title.innerHTML = "This is another title";</script></body></html>

Example of awebsiteHTML in index.html<link href="style.css" rel="stylesheet"/><h1>Welcome</h1><p><button>Click me</button></p><script src="code.js"/>CSS in style.cssh1 { color: #333;} button {border: 2px solid#AAA; background-color: #555;}Javascript in code.js//fetch the button from the DOMvar button = document.querySelector("button");//attach and event when the user clicksit button.addEventListener("click",myfunction);//create the function that will be calledwhen the button is pressedfunction myfunction(){//this shows a popupwindow alert("buttonclicked!");}

jQueryjQuery is a library that makes working with the DOM much easier, using anunified syntax and taking advantage of selectors:$("p").remove(); //remove all tags p$("#main").hide(); //hides the element of id main$("#main").append("<h1>titulo</h1>") //adds content to an element$("#wrap").css({ color: "red" }); //change the css$("button#send").click( function() { /* code */ });To include this library just add this to your HTML:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Introduction to HTML+CSS+Javascript.pptx

Movatterモバイル変換

Change Language

Introduction to HTML+CSS+Javascript.pptx

Embed presentation

Recommended

More Related Content

Similar to Introduction to HTML+CSS+Javascript.pptx

Recently uploaded

Introduction to HTML+CSS+Javascript.pptx