Movatterモバイル変換

Introduction to webtechnologiesHTML + CSS + JavascriptJavi Agenjo (@tamat)

IntroductionWhen you decide to develop an application using anyprogramming language, one of the first problem youface is that programming languages do not include alibrary to create User Interfaces.You need to use some framework to access the OSlayer. Every programming language has at least one,but you need to choose it first.One of the nice things about developing for the web isthat the web provides a very rich and simpleframework to create applications that include lots offeatures, not only interface but also access toperipherals (audio, input, gamepads, etc), and thisAPI is very easy to use.Your CodeFrameworkOperative SystemHardware

GoalsIntroduction to web technologies:● HTML to create the documentstructure and content● CSS to control is visual aspect● Javascript for interactivity

ToolsWhat do we need to start:● a good web-browser (Chrome or Firefox)● a good text editor like:○ VSCode (cross platform)○ Notepad++ (win)○ textWrangler (osx)○ sublime text (cross platform)○ ecode (cross platform)● the example HTML code to start

How can I test my codeJust open the index.html from the template in your text editor and in yourbrowser.When you do any change to the code, check it in the browser by pressingF5 (refresh site)To open the developer tools press:Windows: Control + Shift + I orOSX: Command + Opt + IOther tools are online editors like scratchpad or htmledit

Inside a browserBrowsers have very differentiate parts.We are interested in two of them:● the Rendering Engine (in chargeof transforming our HTML+CSS ina visual image).● The Javascript Interpreter (alsoknown as VM), in charge ofexecuting the Javascript code.

Technologies●HTML●CSS●Javascript

Browsers as a rendererBrowser's act as a renderer that takes documentsand construct a visual representation of them.Starting with the most simple one, a text document, itwill try to visualize it.You can try, drop any .txt file into your browser tovisualize it.The problem is that text documents without anyformatting tend to be hard to read for the user (andquite boring).That's why HTML was created, to give text someformat.

Markup languageThere are many markup languages thatadd special tags into the text that therenderer wont show but use to knowhow to display the text.In HTML this tags use the next notation:My name is <b>Javi</b>

HTMLHTML means Hyper Text Markup Language.The HTML allow us to define the structure of a document or awebsite.HTML is NOT a programming language, it’s a markup language,which means its purpose is to give structure to the content of thewebsite, not to define an algorithm.It is a series of nested tags (it is a subset of XML) that contain allthe website information (like texts, images and videos). Here is anexample of tags:<title>This is a title</title>The HTML defines the page structure. A website can have severalHTMLs to different pages.<html><head></head><body><div><p>Hi</p></div></body></html>

HTML: basic rulesSome rules about HTML:● It uses XML syntax (tags with attributes, can contain other tags).<tag_name attribute="value"> content </tag_name>● It stores all the information that must be shown to the user.● There are different HTML elements for different types of information and behaviour.● The information is stored in a tree-like structure (nodes that contain nodes inside) calledDOM (Document Object Model).● It gives the document some semantic structure (pe. this is a title, this is a section, this isa form) which is helpful for computers to understand websites content.● It must not contain information related to how it should be displayed (that informationbelongs to the CSS), so no color information, font size, position, etc.

HTML: syntax example<div id="main">This is text without a tag.<button class="mini">press me</button><img src="me.png" /></div>

HTML: syntax example<div id="main">This is text without a tag.<button class="mini">press me</button><img src="me.png" /></div>Tag nameattributescommenttext tagself-closing tag

DOM is a treeEvery node can only haveone parent, and every nodecan have several children,so the structure looks like atree.

Although there are lots of tags in the HTML specification, 99% of the webs use a subset ofHTML 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 useful sometimes:● <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

HTML: wrapping the infoWe use HTML tags to wrap differentinformation on our site.The more structure has the information, theeasier will be to access it and present it.We can change the way the information isrepresented on the screen depending on thetags where it is contained, so we shouldn't beworried about using too many tags.

HTML: tagging correctlyTry to avoid doing this:<div>TitleHere is some contentHere is more content</div>Do this instead<div><h1>Title</h1><p>Here is content.</p><p>Here is more content</p></div>DONT DO THIS

HTML good useIt is good to have all the information properly wrapped in tags that give it somesemantics.We also can extend the code semantics by adding extra attributes to the tags:● id: tells a unique identifier for this tag● class: tells a generic identifier for this tag<div id="profile-picture" class="mini-image">...</div>

HTML referencesHTML Reference: a description of all HTML tags.The 25 Most used tags: a list with information of the morecommon tags.HTML5 Good practices: some tips for starters

CSSCSS allows us to specify how to present(render) the document info stored in theHTML.Thanks to CSS we can control all theaspects of the visualization and some otherfeatures:● Colors: content, background, borders● Margins: interior margin, exteriormargin● Position: where to put it● Sizes: width, height● Behaviour: changes on mouse over

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 Tahoma with14px, and leaving a margin of 10px around.

CSS fieldsHere is a list of the most common CSS fields and an example:● color: #FF0000; red; rgba(255,00,100,1.0); //different ways to specifycolors● 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 specify distances● height: 200px;● text-align: center;● box-shadow: 3px 3px 5px black;● cursor: pointer;● display: inline-block;● overflow: hidden;

CSS how to add itThere are four ways to add CSS rules to your website:● Inserting the code inside a style tag<style>p { color: blue }</style>● Referencing an external CSS file<link href="style.css" rel="stylesheet" />● Using the attribute style on a tag<p style="color: blue; margin: 10px">● Using Javascript (we will see this one later).

CSS selectorsLet's start by changing the background color of one tag of our website:div {background-color: red;}This CSS rule means that every tag DIV found in our website should have a red backgroundcolor. Remember that DIVs are used mostly to represent areas of our website.We could also change the whole website background by affecting the tag body:body {background-color: red;}

CSS selectorsWhat if we want to change one specific tag (not all the tags of the same type).We can specify more precise selectors besides the name of the tag. For instance, by classor id. To specify a tag with a given class name, we use the dot:p.intro {color: red;}This will affect only the tags p with class name intro:<p class="intro">

CSS SelectorsThere are several selectors we can use to narrow our rules to very specific tags of our website.The main selectors are:● tag name: just the name of the tag○ p { ... } //affects to all <p> tags● dot (.): affects to tags with that class○ p.highlight { ... } //affects all <p> tags with class="highlight"● sharp character (#): specifies tags with that id○ p#intro { ... } //affects to the <p> tag with the id="intro"● two dots (:): behaviour states (mouse on top)○ p:hover { ... } //affects to <p> tags with the mouse over● brackets ([attr='value']): tags with the attribute attr with the value 'value'○ input[type="text"] {...} // affects to the input tags of the typetext

CSS SelectorsYou can also specify tags by its context, for example: tags that are inside of tags matching aselector. 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

CSS SelectorsAnd you can combine selectors to narrow it down more.div#main.intro:hover { ... }will apply the CSS to the any tag div with id main and class intro if the mouse is over.And you do not need to specify a tag, you can use the class or id selectors without tag, thismeans it will affect to any node of id main#main { ... }

CSS SelectorsIf you want to select only elements that are direct child of one element (not that have anancestor with that rule), use the > character:ul.menu > li { ... }Finally, if you want to use the same CSS actions to several selectors, you can use thecomma , character:div, p { … } ← this will apply to all divs and p tags

HTML arrangeIt is important to understand how the browserarranges the elements on the screen.Check this tutorial where it explains thedifferent ways an element can be arrangedon the screen.You can change the way elements arearranged using the display property:div { display: inline-block; }Also check the property float.

Box ModelIt is important to note that by default anywidth and height specified to an element willnot take into account its margin, so a div withwidth 100px and margin 10px will measure120px on the screen, not 100px.This could be a problem breaking yourlayout.You can change this behaviour changing thebox model of the element so the width usesthe outmost border:div { box-sizing: border; }

LayoutOne of the hardest parts of CSS isconstruing the layout of your website (thestructure inside the window) .By default HTML tends to put everything inone column, which is not ideal.There has been many proposals in CSS toaddress this issue (tables, fixed divs, flex,grid, …).

FlexboxThe first big proposal to address the layoutwas the flexbox model.This model allows to arrange stuff in onedirection (vertically or horizontally) veryeasily.You can even choose to arrange from rightto left (reverse).It can also be used to arrange a series ofelements in different rows.Check the tutorial for more info.HTML<div class="box"><div>One</div><div>Two</div><div>Three<br>first line<br>second line</div></div>CSS.box {display: flex;}

Grid systemBecause most sites are structured in a grid, Irecommend to use the CSS Grid system.We just assign how many rows/columns a divshould use from the main grid and it will arrangeautomatically.Check this tutorial to create the site structureeasilyHTML<div class="grid-container"><div class="grid-item1">1</div><div class="grid-item2">2</div></div>CSS.grid-container {display: grid;grid-template-rows: 100px 100px;grid-template-columns: 100px 100px 100px;grid-gap: 5px;}.grid-item1 {background: blue;border: black 5px solid;grid-column-start: 1;grid-column-end: 5;grid-row-start: 1;grid-row-end: 3;}

Fullscreen divsSometimes we want to have a div that coversthe whole screen (to make a webapp),instead of a scrolling website (more likeregular documents).In that case remember to use percentages todefine the size of elements, but keep in mindthat percentages are relative to the element'sparent size, so you must set the size to the<body> and <html> element to use 100%.CSShtml, body {width: 100%;height: 100%;}div {margin: 0;padding: 0;}#main {width: 100%;height: 100%;}

Trick to center.horizontal-and-vertical-centering {display: flex;justify-content: center;align-items: center;}Centering divs can be hard sometimes, use this trick:

CSS further readingThere are many more rules for selectors.Check some of the links to understand them better.One line layouts tutorialsUnderstanding the Box Model: a good explanation of how to position the information on yourdocument.All CSS Selectors: the CSS selectors specification page.CSS Transition: how to make animations just using CSSTailwindCSS: a CSS Framework

InteractivityOnce the web was already being usedthey realize people wanted to interactwith the websites in a more meaningfulway.So they added an Interpreter to executea script language that could modify thecontent of the web dynamically.Brendan Eich was tasked to develop it inone week and it has become one of themost important languages.

JavascriptA regular programming language, easy to start, hard tomaster.Allows to give some interactivity to the elements on the web.Syntax similar to C or Java but with no types.You can change the content of the HTML or the CSS appliedto an element.You can even send or retrieve information from the internet toupdate the content of the web without reloading 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>

Javascript APIJavascript comes with a rich API to do many things like:● Access the DOM (HTML nodes)● Do HTTP Requests● Play videos and sounds● Detect user actions (mouse move, key pressed)● Launch Threads● Access the GPU, get the Webcam image, ...And the API keeps growing with every new update of the standard.Check the WEB API reference to know more

Using InputsIf you want the user to be able to input some text we use the tag <input>:<input type="text"/>There are other inputs, you can check this list.From Javascript we can attach events like "click" or "keydown".To read or modify the content of the input:my_input_element.value = ""; //this will clear the text inside the input

Example of a websiteHTML 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 clicks itbutton.addEventListener("click", myfunction);//create the function that will be called whenthe button is pressedfunction myfunction(){//this shows a popup windowalert("button clicked!");}

Execution flowIt is important to have a clearunderstanding of the execution flow ofyour code.Scripts are executed when the html isbeing parsed.Be careful accessing the DOM as theDOM won’t contain all until all the HTMLis parsed.It is good practice to start your code withan init function called at the end of yourHTML.<script>var main =document.querySelector("#main");//main here is null, as the elementdoes//exist yet</script><div id="main"></div><script>var main =document.querySelector("#main");//main now is the right element</script>

jQueryjQuery is a library that makes working with the DOM much easier, using an unifiedsyntax 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>

Using the Dev ToolsPress Control + Shift + I (or F12) to open DevTools

ExerciseCreate the layout for amessaging application.Structured like:● Main container○ Messages area■ message○ Typing area area■ input

Further infoAPI References: DevDocs.ioSelectors: MDN TutorialTo learn Javascript.http://codeacademy.comTo learn jQuery:http://docs.jquery.com/Tutorials

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