BioJS

RECAP - HTML, CSS & JS

HTML

Hyper Text Markup Language

What is HTML?



HTML is a markup language for describing web documents (web pages).

  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag characterizes different document content
 

<html>
<head>
    <title>My title</title>    
</head>
<body>
    <a href="">My link</a>
    <h1>My header</h1>
</body>
</html>

HTML Basics

HTML is designed for marking up text by adding tags such as <p> to create HTML elements. HTML tags begin with < and end with >. Tags often occur in pairs of opening and closing tags. Some tags such as <img> always occur alone. Those tags usually (but do not require to) have a trailing slash. 

Tags can have attributes. For example, <a> tag has href attribute for defining link target. Similarly, <img> tag has src attribute for defining image source.

HTML's tree structure


<html>
<head>
    <title>My title</title>    
</head>
<body>
    <a href="">My link</a>
    <h1>My header</h1>
</body>
</html>
Objects in the DOM can be manipulated by JavaScript (add/remove Element)

Use HTML to Structure Site Content

html, body, h1, p, strong, em, a, img

See the Pen HTML TO STRUCTURE by Jose Villaveces (@secevalliv) on CodePen.

CSS

Cascading Style Sheets

What is CSS?



CSS is stylesheet language for the web. Makes webpages look good.

  • CSS stands for Cascading Style Sheets
  • Includes fonts, colors, and many other properties.
  • Each CSS rule uses properties to apply styles to HTML elements
  • CSS can be included in the document with <style> or imported from an external file with <link>.

Example Porperties:

   color: red;
   background-color: steelblue;
   display: none;
   font-family: Times;

CSS example

See the Pen vLMxPY by Jose Villaveces (@secevalliv) on CodePen.

CSS advanced

See the Pen codevember #5 : Fitbit Moon by Smokie Lee (@xtoq) on CodePen.

JavaScript

What is JavaScript?

  • A programming language for the web, generally executed client-side (in your web browser).
  • JS code is written in 'scripts' which are run when the page renders.
  • There are two ways to include JS:
    • In the document 
      <script type="text/javascript">
    alert("Hello world!");
</script>
    • In a separate file
      <script src="viz.js"></script>

Objects in the DOM can be manipulated by JavaScript

//Objects in the DOM can be manipulated by JavaScript
function changeTitle(){
    var title = document.getElementById("slideTitle");
    title.innerText = "See?? JS can manipulate dom objects";
}

Conclusion

Back to program

@ VIZBI 2016