HTML, CSS, and JavaScript: The big picture

HTML, CSS, and JavaScript: The big picture

1. HTML

   • Hypertext Markup Language is the standard markup language for creating web pages and web applications
     • Standard language for the web, it is a markup language NOT a programming language or a scripting language
     • HTML is used to control the presentation of data (text and images)
   • Who manages the HTML Specification?
   • What is HTML?
     • Documents with the .HTM or .HTML extensions, that can be understood by all web browsers
       • • HTML elements are the building blocks of HTML pages
           • HTML elements are represented by tags, these normally come in pairs. The start tag is also called the opening tag, and the end tag the closing tag.
             • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
             • Browsers do not display the HTML tags, but use them to render the content of the page
         • The <!DOCTYPE html> declaration defines this document to be HTML5. The <html> element is the root element of an HTML page. The <head> element contains meta information about the document. The <title> element specifies a title for the document. The <body> element contains the visible page content.
     • HTML describes the structure of Web pages using markup
     • Frameworks that help write/generate html
       • framework not only generate code , but also they allow you to do more advance things like comunicate with a database
       • Example using ASP.NET MVC
       • Common frameworks
         • PHP, Java, ASP.NET MVC, Ruby, Python, Node.js, Go
   • Brief history of HTML

2. CSS

   • Cascading style sheets is a style sheet language used for describing the presentation of a document written in a markup language
     • A CSS style sheet can be stored in an external file and linked to an HTML via the <link> tag. But CSS can also be inline meaning an HTML tag has the style attribute where CSS can be declared. NOTE: inline style is not a very good practice. You can also use the <style> tag to declare style in an HTML document.
       • If diferent styles are specified for HTML elements, the styles will cascade into new styles with the following priority: Priority 1: Inline styles. Priority 2: External and internal style sheets. Priority 3: Browser default If different styles are defined on the same priority level, the last one has the highest priority.
   • Brief history of CSS
   • CSS Syntax Selectors
     • CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
       • The element selector selects elements based on the element name.
       • The id selector uses the id attribute of an HTML element to select a specific element.
         • The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
       • The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
   • CSS Preprocessors
     • A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

3. JavaScript

   • JavaScript is a high-level interpreted programming language
   • JavaScript is not Java, and it is not derived from Java
   • Brief history of JavaScript
   • JavaScript can update and change both HTML and CSS JavaScript can calculate, manipulate and validate data
   • JavaScript can be stored in an external file and linked to an HTML via the <link> tag. You can also use the <style> tag to declare javascript in an HTML document.
   • you can use JavaScript to interact with the browser
   • AJAX
     • With AJAX you can Update a web page without reloading the page. Request data from a server after the page has loaded. Receive data from a server after the page has loaded. Send data to a server in the background

4. Brief history of the web

5. World Wide Web

   • The world wide web is an information space documents and other web resources are identified by Uniform Resource Locators, interlinked by hypertext links, and can be accesed via the internet.
   • Ingridients of the web
     • • Resources like documents, images, mp3's, etc..
     • • Uniform Resource Locator is a references (address) to a resource on the internet
     • • HTTP is the protocol used by the World Wide Web, this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.

Imágenes y archivos del mapa