The document provides information on HTML elements and best practices for frontend development. It discusses the basic structure of HTML with the <html>, <head>, and <body> elements. It also covers common text elements like <p>, <h1>-<h6>, and lists. The document explains how to semantically structure tables and provides examples of the <table>, <tr>, <td>, and <th> elements. It emphasizes writing accessible, valid HTML and separating structure, presentation, and behavior.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
This document provides an introduction to HTML5:
- It discusses backwards compatibility, progressive enhancement, and the <!DOCTYPE html> declaration in HTML5.
- It describes the syntax options of HTML or XHTML and provides examples of new HTML5 elements like <video>, <canvas>, and various new <input> types.
- It includes a full sample HTML5 page with new elements, semantics, and WAI-ARIA roles for accessibility.
The document summarizes new features in HTML5 including less header code needed, more semantic HTML tags, media tags for embedding video and audio, geolocation capabilities, the canvas element for drawing, new input types for forms, drag and drop, local storage, cross-domain messaging, web sockets, and the eventual ability to do 3D graphics with canvas. It provides examples and explanations of how to use many of these new features.
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
Â
Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.
HTML5 is a new version of the HTML standard that is still being developed. It aims to expand HTML to better support rich web applications. Some key points:
- A WHATWG group started developing HTML5 in 2004 as browsers evolved beyond HTML4. It addresses issues like video playback and richer forms that HTML4 could not.
- HTML5 is an application-centered language that introduces new semantic elements like <section>, <article>, and <nav> to better structure pages. It also adds new form input types, canvas, and video elements.
- While the HTML5 spec is large, browsers do not need to fully implement it to start using new features. Developers can use features now and provide
The document discusses HTML5 and its advantages over previous standards. Key points include:
- Major tech companies support HTML5 as the future of the web.
- HTML5 offers new forms capabilities, native multimedia, and features that are usable now like canvas, geolocation, and semantic elements.
- The HTML5 doctype is simpler than previous standards. Form controls and semantic elements are introduced.
- Polyfills and other techniques can provide fallback support for older browsers that do not yet support HTML5 features.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
This document provides an introduction to HTML5:
- It discusses backwards compatibility, progressive enhancement, and the <!DOCTYPE html> declaration in HTML5.
- It describes the syntax options of HTML or XHTML and provides examples of new HTML5 elements like <video>, <canvas>, and various new <input> types.
- It includes a full sample HTML5 page with new elements, semantics, and WAI-ARIA roles for accessibility.
The document summarizes new features in HTML5 including less header code needed, more semantic HTML tags, media tags for embedding video and audio, geolocation capabilities, the canvas element for drawing, new input types for forms, drag and drop, local storage, cross-domain messaging, web sockets, and the eventual ability to do 3D graphics with canvas. It provides examples and explanations of how to use many of these new features.
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
Â
Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.
HTML5 is a new version of the HTML standard that is still being developed. It aims to expand HTML to better support rich web applications. Some key points:
- A WHATWG group started developing HTML5 in 2004 as browsers evolved beyond HTML4. It addresses issues like video playback and richer forms that HTML4 could not.
- HTML5 is an application-centered language that introduces new semantic elements like <section>, <article>, and <nav> to better structure pages. It also adds new form input types, canvas, and video elements.
- While the HTML5 spec is large, browsers do not need to fully implement it to start using new features. Developers can use features now and provide
The document discusses HTML5 and its advantages over previous standards. Key points include:
- Major tech companies support HTML5 as the future of the web.
- HTML5 offers new forms capabilities, native multimedia, and features that are usable now like canvas, geolocation, and semantic elements.
- The HTML5 doctype is simpler than previous standards. Form controls and semantic elements are introduced.
- Polyfills and other techniques can provide fallback support for older browsers that do not yet support HTML5 features.
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
Â
This document discusses HTML5 and related topics. It provides code examples of new HTML5 elements like <header>, <article>, and <canvas>. It demonstrates how to add semantics, draw shapes, and load images onto a canvas. It also mentions new APIs for video, custom data attributes, and live regions for accessibility. The goal is to introduce HTML5 and showcase its capabilities for building engaging web content.
The document provides a cheat sheet for HTML and HTML5 tags, including:
1. An overview of common tags for document structure like <html>, <head>, <body>, and headings; formatting tags like <p>, <strong>, and <em>; and links and images with <a> and <img>.
2. Descriptions of lists (<ul>, <ol>, <li>), forms, tables, and multimedia with tags like <map>, <area>, <video>, and <audio>.
3. A list of new HTML5 tags and character entities at the end. The cheat sheet covers the essential tags for text, structure, links, images, and lists to provide a high-
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
The document discusses new features in HTML5 including semantic elements, form elements, and microdata. Some key points:
1. HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article>, and <section> to define different parts of a page and improve semantics and accessibility.
2. New form input types are added like email, url, tel, number, date to support validation and new UI widgets. Attributes like placeholder, autofocus, and autocomplete improve the form experience.
3. Microdata builds on microformats to embed structured data using attributes like itemscope, itemtype, and itemprop to identify items, properties and values for search engines and APIs
CSS frameworks provide standardized code to aid in website development. This document discusses two types of frameworks - frontend frameworks that affect the user interface, and backend frameworks that affect website logic and operation. It focuses on Flexbox and Unsemantic, two popular CSS frontend frameworks. Flexbox uses flex containers and items to lay out page sections in rows or columns. Unsemantic provides predefined grid classes to lay out content without custom CSS. The document provides code examples of using these frameworks to create a three-column layout with colored sections of varying sizes.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. Weâll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. Youâll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
This document summarizes an introductory workshop on web technologies including HTML, CSS, and the document object model (DOM). It provides an overview of the history and basics of HTML, how to set up a basic website, and introductions to CSS, the DOM, and additional web technologies covered in the workshop like forms and positioning.
Todayâs designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
The document discusses HTML5 and slicing templates. It introduces HTML5, explaining what it is and is not. It describes new HTML5 tags like <header>, <nav>, <section>, <article>, and <footer> that provide semantic structure. It also covers new HTML5 features like simplified tags, internationalization, multimedia, graphics, forms, and APIs. The document recommends a default slicing template for creating uniform website designs and provides contact information for the authors.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It uses tags to structure and present content on the web, allowing text to be styled, images to be included, and other elements like lists, tables, and forms to be added to pages. Key HTML tags include headings, paragraphs, links, images, lists, tables, and divs for organizing and laying out content.
This document provides an introduction to HTML5 and discusses some of its new features. It begins with an overview of HTML5 and its updated document structure, then describes several new HTML5 elements such as <header>, <nav>, <article>, <section>, <figure>, and <footer>. It also discusses new form attributes, input types, and multimedia capabilities such as audio, video, and geolocation. Finally, it briefly mentions features like drag and drop, SVG graphics, canvas drawing, and server-sent events.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Origins and evolution of HTML and XHTML by Tanvir Zafar.
HTML is the Basic web design language.
Learn more about HTML at http://howpk.com/introduction-to-html/
The document discusses various topics related to web development including XHTML, CSS, and JavaScript. It provides definitions and explanations of XHTML, CSS, JavaScript, and the differences between HTML and XHTML. It also covers common issues with supporting older browsers like IE6 and strategies for overcoming those issues such as using frameworks to simplify tasks like DOM manipulation and event handling.
Getting to know perch â and perch runway!Abigail Larsen
Â
Supporting slides from an introduction to the basics of content management (from a development perspective) using Perch and Perch Runway. Talk given by Abby Larsen at the PDX CMS meetup, June 17 2015.
HTML5 introduces several new features that reduce the need for plugins, make error handling easier, and allow for more semantic markup. Some key features include the <canvas> element for drawing, <video> and <audio> elements for media playback, and local storage support. HTML5 also includes new form controls and content elements like <article>, <header>, <nav>, and <section>. The <figure> element specifies self-contained content like images. HTML5 aims to be device-independent and have a more visible development process.
Perch CMS Summit: Perch Template Tips and TricksRachel Andrew
Â
This document provides an overview of Perch templates, including what templates are, how to create templates, and the various attributes and tags that can be used to customize templates. Templates define both the content input interface and output display in Perch. The document covers template fields, formatting options, repeating structures, blocks, and includes.
Marketing professionals use various publications to reach their target audiences, including internal memos and external magazines, journals, and quarterly reports. They provide guidance to each other through case studies of brands. New digital technologies also help companies promote themselves and better serve customers.
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
Â
This document discusses HTML5 and related topics. It provides code examples of new HTML5 elements like <header>, <article>, and <canvas>. It demonstrates how to add semantics, draw shapes, and load images onto a canvas. It also mentions new APIs for video, custom data attributes, and live regions for accessibility. The goal is to introduce HTML5 and showcase its capabilities for building engaging web content.
The document provides a cheat sheet for HTML and HTML5 tags, including:
1. An overview of common tags for document structure like <html>, <head>, <body>, and headings; formatting tags like <p>, <strong>, and <em>; and links and images with <a> and <img>.
2. Descriptions of lists (<ul>, <ol>, <li>), forms, tables, and multimedia with tags like <map>, <area>, <video>, and <audio>.
3. A list of new HTML5 tags and character entities at the end. The cheat sheet covers the essential tags for text, structure, links, images, and lists to provide a high-
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
The document discusses new features in HTML5 including semantic elements, form elements, and microdata. Some key points:
1. HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article>, and <section> to define different parts of a page and improve semantics and accessibility.
2. New form input types are added like email, url, tel, number, date to support validation and new UI widgets. Attributes like placeholder, autofocus, and autocomplete improve the form experience.
3. Microdata builds on microformats to embed structured data using attributes like itemscope, itemtype, and itemprop to identify items, properties and values for search engines and APIs
CSS frameworks provide standardized code to aid in website development. This document discusses two types of frameworks - frontend frameworks that affect the user interface, and backend frameworks that affect website logic and operation. It focuses on Flexbox and Unsemantic, two popular CSS frontend frameworks. Flexbox uses flex containers and items to lay out page sections in rows or columns. Unsemantic provides predefined grid classes to lay out content without custom CSS. The document provides code examples of using these frameworks to create a three-column layout with colored sections of varying sizes.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. Weâll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. Youâll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
This document summarizes an introductory workshop on web technologies including HTML, CSS, and the document object model (DOM). It provides an overview of the history and basics of HTML, how to set up a basic website, and introductions to CSS, the DOM, and additional web technologies covered in the workshop like forms and positioning.
Todayâs designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
The document discusses HTML5 and slicing templates. It introduces HTML5, explaining what it is and is not. It describes new HTML5 tags like <header>, <nav>, <section>, <article>, and <footer> that provide semantic structure. It also covers new HTML5 features like simplified tags, internationalization, multimedia, graphics, forms, and APIs. The document recommends a default slicing template for creating uniform website designs and provides contact information for the authors.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It uses tags to structure and present content on the web, allowing text to be styled, images to be included, and other elements like lists, tables, and forms to be added to pages. Key HTML tags include headings, paragraphs, links, images, lists, tables, and divs for organizing and laying out content.
This document provides an introduction to HTML5 and discusses some of its new features. It begins with an overview of HTML5 and its updated document structure, then describes several new HTML5 elements such as <header>, <nav>, <article>, <section>, <figure>, and <footer>. It also discusses new form attributes, input types, and multimedia capabilities such as audio, video, and geolocation. Finally, it briefly mentions features like drag and drop, SVG graphics, canvas drawing, and server-sent events.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Origins and evolution of HTML and XHTML by Tanvir Zafar.
HTML is the Basic web design language.
Learn more about HTML at http://howpk.com/introduction-to-html/
The document discusses various topics related to web development including XHTML, CSS, and JavaScript. It provides definitions and explanations of XHTML, CSS, JavaScript, and the differences between HTML and XHTML. It also covers common issues with supporting older browsers like IE6 and strategies for overcoming those issues such as using frameworks to simplify tasks like DOM manipulation and event handling.
Getting to know perch â and perch runway!Abigail Larsen
Â
Supporting slides from an introduction to the basics of content management (from a development perspective) using Perch and Perch Runway. Talk given by Abby Larsen at the PDX CMS meetup, June 17 2015.
HTML5 introduces several new features that reduce the need for plugins, make error handling easier, and allow for more semantic markup. Some key features include the <canvas> element for drawing, <video> and <audio> elements for media playback, and local storage support. HTML5 also includes new form controls and content elements like <article>, <header>, <nav>, and <section>. The <figure> element specifies self-contained content like images. HTML5 aims to be device-independent and have a more visible development process.
Perch CMS Summit: Perch Template Tips and TricksRachel Andrew
Â
This document provides an overview of Perch templates, including what templates are, how to create templates, and the various attributes and tags that can be used to customize templates. Templates define both the content input interface and output display in Perch. The document covers template fields, formatting options, repeating structures, blocks, and includes.
Marketing professionals use various publications to reach their target audiences, including internal memos and external magazines, journals, and quarterly reports. They provide guidance to each other through case studies of brands. New digital technologies also help companies promote themselves and better serve customers.
The document lists a series of daily activities including taking a walk, having meals, going somewhere, watching television, returning home, chatting, cooking, studying, doing chores, listening to music, and going out again.
Marketing professionals use various publications to reach their target audiences, including internal memos and external magazines, journals, and press releases. Internally, memos provide a formal way to communicate within a company, while quarterly releases report financial performance to shareholders. Externally, marketing magazines inform readers about business marketing strategies and financial journals maintain accounting records of transactions. Press releases aim to draw media attention to new products or events. Mobile technology now helps both companies promote themselves and customers access services like loyalty programs on the go.
This document discusses various publications used in marketing, including internal memos, quarterly reports, marketing magazines, financial journals, other related magazines, and press releases. It explains what each of these publications are and how marketing professionals use them to communicate within companies and to external audiences. The document also discusses how brands can build influence through providing value to customers and avoiding deception. Digital technology has helped companies promote themselves and customers manage their needs through applications.
This document discusses migration between India and Bangladesh. It outlines how migration emerged as a problem following the partition of India in 1947 and establishment of East Pakistan, now Bangladesh. Millions of Hindus fled to India from religious persecution. The document examines the main disputes around illegal migration, including accusations around expelling Indian Muslims. It explores reasons why Bangladeshis migrate to India, including proximity, culture, and opportunities. However, illegal migration has negatively impacted resources, security, and tensions between the countries.
The document discusses the Document Object Model (DOM) and its core concepts. It covers how the DOM represents an HTML document as nodes organized in a tree structure, with different node types like elements, text, and attributes. It also describes common DOM manipulation methods for selecting, inserting, and removing nodes to modify the document. Key interfaces and inheritance are explained, along with how to work with different node types, events, and document fragments.
JavaScript Coding & Design Patterns discusses JavaScript style guides, namespaces, dependencies, dealing with browsers, separation of concerns, DOM scripting, events, functions, and design patterns like the Singleton, Module, and Prototypal Inheritance patterns. It covers topics like hoisting, scope, configuration objects, IIFEs, and using the new keyword and Object.create method for prototypal inheritance. The document provides examples and explanations of these JavaScript concepts and design patterns.
The Frankfurt School was an intellectual group that developed critical theory at the Frankfurt Institute for Social Research in Frankfurt, Germany in the 1920s. It emphasized critiquing and changing society to eliminate oppression and inequality. Key figures included Max Horkheimer, Theodor Adorno, Herbert Marcuse, and Jurgen Habermas. Critical theory rejects the idea of objective knowledge in social sciences and argues that theory should promote social change. It differs from traditional theory in being subjective, change-oriented, and emphasizing norms over empirical facts. Critical theory makes major contributions to international relations by critiquing power structures and promoting cosmopolitan ideals of justice, equality, and human rights globally.
The document describes several new HTML5 tags including <article> for self-contained content, <aside> for related content, and <audio> and <video> for embedding sound and video. It also covers tags for figures (<figure>), headers and footers (<header> and <footer>), and navigation (<nav>). Finally, it discusses new form and media elements such as <datalist>, <keygen>, <output>, <embed> and <track>.
The document summarizes a meetup event for a web standards group in Darwin, Australia on April 13, 2011. It includes an agenda for the meetup with items like welcome, housekeeping, sponsors, a quick talk on microdata, and networking. It also provides information on the next meetup, how to suggest topics, locations, and ways to follow the group online.
The document discusses HTML tags and their usage. It covers common tags like <a>, <img>, <table>, <form>, and <input> and describes their attributes and purposes. It also covers other tags for text formatting, lists, quotes, and comments. The document provides examples and explanations for proper implementation of various HTML tags.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Â
Everyoneâs going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.
Polymer is a library for building web components that aims to support modern browsers and minimize boilerplate code. It uses web platform APIs like Shadow DOM, HTML Imports, and Custom Elements to allow developers to define reusable custom elements with encapsulated styles and behaviors. Polymer provides features like automatic node finding, two-way data binding, change watchers, and declarative event handling to make building web components easier. Elements can also communicate with each other through properties, events, or calling public methods. The goal of Polymer is to embrace HTML and leverage the evolving web platform to build more maintainable and reusable components.
The document summarizes the history and key features of HTML5. It discusses the evolution of HTML from 1991 to the present, including versions like HTML4.01. It also covers new HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that replace older <div> elements. Additionally, it provides overviews of new HTML5 APIs and features like geolocation, WebSockets, and Web Storage, as well as CSS3 properties like text-shadow, RGBa colors, gradients, and transitions.
The document discusses HTML (Hypertext Markup Language), which defines the structure and layout of web pages using tags and attributes. It describes common HTML elements like <head>, <title>, <body>, and <html> that form the basic structure of an HTML document, as well as tags for text formatting, hyperlinks, images, lists, and tables. Paired and singular tags are introduced along with examples.
HTML5 is the next generation of HTML that supersedes previous versions. Key features of HTML5 include new semantic HTML elements, Web Forms 2.0, multimedia support for video and audio, canvas element for 2D drawing, and local storage. HTML5 aims to provide one standard for web development that works across all major browsers through cooperation between the W3C and WHATWG.
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
Â
What is HTML?
HTML stands for "Hypertext Markup Language". A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
Hypertext Markup Language is the standard markup language for creating the Web pages and Web Applications. With Cascading Style Sheets (CSS) & JavaScript for creating World Wide Web pages.
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.
HTML is relatively easy to learn & it consists of a series of short codes typed into a text-file by the site author â these are the tags. The text is then saved as a html file, and viewed through a browser.
This document provides an introduction to HTML structure and layout. It covers key HTML elements like paragraphs, headings, links, images and their tags. It also discusses HTML attributes, block and inline elements, and how to use style attributes to format text. The document introduces HTML lists, tables, forms and input elements.
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
Â
HTML is a markup language used to describe web pages. It uses tags to structure content into headings, paragraphs, lists, and other elements. Key HTML elements include <head> for page metadata, <body> for visible content, and <html> as the root element wrapping everything. Tags like <p>, <img>, and <a> are used to format text, embed images, and create hyperlinks. HTML documents are plain text that can be viewed and edited in any text editor.
Web pages are hypertext documents connected to the World Wide Web. They are displayed using web browsers, which are programs that retrieve and display HTML files. Web servers are computers that deliver web pages to users, and have IP addresses and domain names. There are two main types of websites: static and dynamic. The basic structure of an HTML web page includes tags such as <!DOCTYPE>, <html>, <head>, <title>, and <body>. Cascading Style Sheets (CSS) is a language used to describe the presentation and formatting of web pages, and can be inserted via external style sheets, internal style sheets, or inline styles.
This document provides an overview of HTML and how websites work. It discusses HTML elements and tags, how to structure an HTML page using the <head>, <body>, and other tags. It also covers how to format text, add headings and paragraphs, and change background and text colors. The learning outcomes are to understand basic HTML coding syntax and styles and how they are used to code websites.
The document provides an introduction to HTML and CSS for a WWW course. It discusses various HTML tags such as headings, paragraphs, lists, tables, and forms. It also covers CSS topics like the syntax, selectors, and properties for width and height. Students are assigned to improve their flower shop website by adding more pages that introduce the shop, showcases, and about page using images and various HTML elements and tags.
This document provides an introduction to HTML (Hypertext Markup Language) and web page programming. It defines HTML as a markup language that uses tags to structure and present content on web pages. It describes some basic HTML tags like <html>, <head>, <title>, and <body> that provide the underlying framework and structure for web pages. It also covers other common tags for formatting text, inserting images, and setting attributes like color, size, and alignment. The document is intended as a classroom resource to teach the fundamentals of HTML and creating simple web pages.
The document discusses HTML elements and web page layout. It defines various HTML tags like <header>, <nav>, <section>, <article>, and <footer> that are used to semantically mark up the different parts of a web page. These semantic elements clearly describe their meaning to both browsers and developers, and help structure the layout of web pages.
This document provides an introduction to HTML, CSS, and WordPress. It covers the basics of HTML including common tags for formatting text, images, and links. It then discusses using CSS to style HTML elements using classes, IDs, and other selectors. Finally, it gives an overview of how HTML and CSS are used together in WordPress templates and themes.
The document provides an introduction to HTML basics including text, images, tables and forms. It covers the structure of an HTML document with the <head> and <body> sections. It describes common tags for headings, paragraphs, hyperlinks and images. It also discusses attributes, comments, and different ways to style and format text in HTML. The document is intended to teach HTML fundamentals.
The document provides an introduction to HTML basics including the structure of an HTML document and common tags. It discusses the <head> and <body> sections, with the <head> containing metadata like the <title> and optional <meta>, <script>, and <style> tags. The <body> contains the visible page content and supports text formatting, hyperlinks, images, lists, and divisions/spans.
Presentation used to give an introduction to Regular Expression in JavaScript at MercadoLibre Inc. Spanish: https://www.youtube.com/watch?v=skG03rdOhpo
MercadoLibre is every day less requested with the IE7 browser. So in a few months we are going to leave giving support for that specific browser. Now, with a little previous analysis we are able to use the html5shiv tool. I used this slides to explain, share and reflect about how is and works the new HTML5 outline.
This was based on http://www.slideshare.net/hmammana/semantic-markup-creating-outline.
This document provides a summary of best practices for front-end development. It discusses semantic HTML, CSS organization and specificity, responsive images, JavaScript performance, and other optimization techniques. Key recommendations include writing semantic HTML first before styling, avoiding inline styles, properly structuring CSS with comments and organization, reducing requests by combining files and using sprites, and placing JavaScript before the closing body tag.
This presentation given for developers at Truelogic Software Solutions is about CSS and layouting. It is explained all the ways to re-position an element in the screen.
El documento habla sobre la tipografĂa en la web. Explica que aunque la web comenzĂł siendo solo texto, el 95% de su contenido aĂşn es texto. Describe las familias tipogrĂĄficas y cĂłmo se ven afectadas en pantallas como las computadoras, celulares y tabletas. TambiĂŠn cubre temas como la estructura semĂĄntica del HTML y la jerarquĂa visual del CSS para diseĂąar tipografĂas en la web. Finalmente, anticipa las posibilidades futuras del HTML5 y CSS3 para mejorar el diseĂąo tipogrĂĄfico en la web.
This document discusses semantic markup and outlines. It defines markup languages as systems for annotating documents in a way that is distinguishable from text. Semantic markup uses elements, attributes, and values that have specific predefined meanings. An outline is a list of potentially nested sections. Key HTML elements for outlines include headings (h1-h6) and sectioning elements (article, aside, nav, section). WAI-ARIA adds semantics for accessibility, while Microdata embeds semantics within existing content. Designers must consider accessibility and provide all needed context when labeling elements. Tools like HTML5 Outliner can help with outlines.
This presentation has been given to the MercadoLibre UX area to update the team the project state. It speaks about the most important challenges in the Q4.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether youâre at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. Weâll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Programming Foundation Models with DSPy - Meetup SlidesZilliz
Â
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfflufftailshop
Â
When it comes to unit testing in the .NET ecosystem, developers have a wide range of options available. Among the most popular choices are NUnit, XUnit, and MSTest. These unit testing frameworks provide essential tools and features to help ensure the quality and reliability of code. However, understanding the differences between these frameworks is crucial for selecting the most suitable one for your projects.
Taking AI to the Next Level in Manufacturing.pdfssuserfac0301
Â
Read Taking AI to the Next Level in Manufacturing to gain insights on AI adoption in the manufacturing industry, such as:
1. How quickly AI is being implemented in manufacturing.
2. Which barriers stand in the way of AI adoption.
3. How data quality and governance form the backbone of AI.
4. Organizational processes and structures that may inhibit effective AI adoption.
6. Ideas and approaches to help build your organization's AI strategy.
Building Production Ready Search Pipelines with Spark and MilvusZilliz
Â
Spark is the widely used ETL tool for processing, indexing and ingesting data to serving stack for search. Milvus is the production-ready open-source vector database. In this talk we will show how to use Spark to process unstructured data to extract vector representations, and push the vectors to Milvus vector database for search serving.
Dive into the realm of operating systems (OS) with Pravash Chandra Das, a seasoned Digital Forensic Analyst, as your guide. đ This comprehensive presentation illuminates the core concepts, types, and evolution of OS, essential for understanding modern computing landscapes.
Beginning with the foundational definition, Das clarifies the pivotal role of OS as system software orchestrating hardware resources, software applications, and user interactions. Through succinct descriptions, he delineates the diverse types of OS, from single-user, single-task environments like early MS-DOS iterations, to multi-user, multi-tasking systems exemplified by modern Linux distributions.
Crucial components like the kernel and shell are dissected, highlighting their indispensable functions in resource management and user interface interaction. Das elucidates how the kernel acts as the central nervous system, orchestrating process scheduling, memory allocation, and device management. Meanwhile, the shell serves as the gateway for user commands, bridging the gap between human input and machine execution. đť
The narrative then shifts to a captivating exploration of prominent desktop OSs, Windows, macOS, and Linux. Windows, with its globally ubiquitous presence and user-friendly interface, emerges as a cornerstone in personal computing history. macOS, lauded for its sleek design and seamless integration with Apple's ecosystem, stands as a beacon of stability and creativity. Linux, an open-source marvel, offers unparalleled flexibility and security, revolutionizing the computing landscape. đĽď¸
Moving to the realm of mobile devices, Das unravels the dominance of Android and iOS. Android's open-source ethos fosters a vibrant ecosystem of customization and innovation, while iOS boasts a seamless user experience and robust security infrastructure. Meanwhile, discontinued platforms like Symbian and Palm OS evoke nostalgia for their pioneering roles in the smartphone revolution.
The journey concludes with a reflection on the ever-evolving landscape of OS, underscored by the emergence of real-time operating systems (RTOS) and the persistent quest for innovation and efficiency. As technology continues to shape our world, understanding the foundations and evolution of operating systems remains paramount. Join Pravash Chandra Das on this illuminating journey through the heart of computing. đ
Generating privacy-protected synthetic data using Secludy and MilvusZilliz
Â
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
5th LF Energy Power Grid Model Meet-up SlidesDanBrown980551
Â
5th Power Grid Model Meet-up
It is with great pleasure that we extend to you an invitation to the 5th Power Grid Model Meet-up, scheduled for 6th June 2024. This event will adopt a hybrid format, allowing participants to join us either through an online Mircosoft Teams session or in person at TU/e located at Den Dolech 2, Eindhoven, Netherlands. The meet-up will be hosted by Eindhoven University of Technology (TU/e), a research university specializing in engineering science & technology.
Power Grid Model
The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services.
Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power gridâs behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability.
Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization.
What to expect
For the upcoming meetup we are organizing, we have an exciting lineup of activities planned:
-Insightful presentations covering two practical applications of the Power Grid Model.
-An update on the latest advancements in Power Grid -Model technology during the first and second quarters of 2024.
-An interactive brainstorming session to discuss and propose new feature requests.
-An opportunity to connect with fellow Power Grid Model enthusiasts and users.
Best 20 SEO Techniques To Improve Website Visibility In SERPPixlogix Infotech
Â
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
Main news related to the CCS TSI 2023 (2023/1695)Jakub Marek
Â
An English đŹđ§ translation of a presentation to the speech I gave about the main changes brought by CCS TSI 2023 at the biggest Czech conference on Communications and signalling systems on Railways, which was held in Clarion Hotel Olomouc from 7th to 9th November 2023 (konferenceszt.cz). Attended by around 500 participants and 200 on-line followers.
The original Czech đ¨đż version of the presentation can be found here: https://www.slideshare.net/slideshow/hlavni-novinky-souvisejici-s-ccs-tsi-2023-2023-1695/269688092 .
The videorecording (in Czech) from the presentation is available here: https://youtu.be/WzjJWm4IyPk?si=SImb06tuXGb30BEH .
Driving Business Innovation: Latest Generative AI Advancements & Success StorySafe Software
Â
Are you ready to revolutionize how you handle data? Join us for a webinar where weâll bring you up to speed with the latest advancements in Generative AI technology and discover how leveraging FME with tools from giants like Google Gemini, Amazon, and Microsoft OpenAI can supercharge your workflow efficiency.
During the hour, weâll take you through:
Guest Speaker Segment with Hannah Barrington: Dive into the world of dynamic real estate marketing with Hannah, the Marketing Manager at Workspace Group. Hear firsthand how their team generates engaging descriptions for thousands of office units by integrating diverse data sourcesâfrom PDF floorplans to web pagesâusing FME transformers, like OpenAIVisionConnector and AnthropicVisionConnector. This use case will show you how GenAI can streamline content creation for marketing across the board.
Ollama Use Case: Learn how Scenario Specialist Dmitri Bagh has utilized Ollama within FME to input data, create custom models, and enhance security protocols. This segment will include demos to illustrate the full capabilities of FME in AI-driven processes.
Custom AI Models: Discover how to leverage FME to build personalized AI models using your data. Whether itâs populating a model with local data for added security or integrating public AI tools, find out how FME facilitates a versatile and secure approach to AI.
Weâll wrap up with a live Q&A session where you can engage with our experts on your specific use cases, and learn more about optimizing your data workflows with AI.
This webinar is ideal for professionals seeking to harness the power of AI within their data management systems while ensuring high levels of customization and security. Whether you're a novice or an expert, gain actionable insights and strategies to elevate your data processes. Join us to see how FME and AI can revolutionize how you work with data!
Ivantiâs Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There weâll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Â
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Donât worry, we can help with all of this!
Weâll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. Weâll provide examples and solutions for those as well. And naturally weâll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Introduction of Cybersecurity with OSS at Code Europe 2024Hiroshi SHIBATA
Â
I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems.
The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS.
Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application.
I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.
Digital Marketing Trends in 2024 | Guide for Staying AheadWask
Â
https://www.wask.co/ebooks/digital-marketing-trends-in-2024
Feeling lost in the digital marketing whirlwind of 2024? Technology is changing, consumer habits are evolving, and staying ahead of the curve feels like a never-ending pursuit. This e-book is your compass. Dive into actionable insights to handle the complexities of modern marketing. From hyper-personalization to the power of user-generated content, learn how to build long-term relationships with your audience and unlock the secrets to success in the ever-shifting digital landscape.
3. Web Browsers
The most important ones.
⢠Internet Explorer
⢠Chrome
⢠Firefox
⢠Safari
⢠Opera
4. Web Browsers
Chrome is bigger than Internet Explorer.
⢠Chrome
⢠Internet Explorer
⢠Firefox
⢠Safari
⢠Opera
5. Rendering engine
How it works?
1. Parses HTML to construct the DOM tree
2. Renders tree construction
3. Creates layout of the render tree
4. Paints the render
9. The DOM
is the object presentation of the HTML document.
html
head body
title h1 p h2 ul div
li li
span img p
10. The DOM
is the interface of HTML elements to the outside world.
11. Rendering engine
by browser.
Engine used by
Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-
Gecko gecko ... etc
Presto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet Channel
Trident Internet Explorer, Windows Phone 7
Safari, Chrome, Adobe Air, Android Browser, Palm webOS, Symbian
WebKit
S60, OWB, Stream, Flock, RockMelt
12. JavaScript engine
by browser.
Engine used by
SpiderMonkey Mozilla Firefox
Rhino Mozilla
Carakan Opera
Chakra Internet Explorer > 9
JScript Internet Explorer < 8
V8 Chrome
Nitro Safari
14. Progressive Enhancement
aims to deliver information to the widest possible audience.
⢠sparse, semantic markup contains all content
⢠end-user web browser preferences are respected
22. What is HTML
⢠HyperText Markup Language
⢠Markup language is not programming language
⢠The web is published in HTML
⢠Itâs maintained by the W3C
23. Elements
Types of elements according to the tag.
<p>Itâs the content</p>
Open tag & close tag. Element with content.
<img />
Unique tag. Element without content.
24. Attributes
Syntax.
<p id=âparagraphâ>Itâs the content</p>
Open tag & close tag. Element with content.
<img src=â/image.jpgâ alt=âIt has a book.â />
Unique tag. Element without content.
27. Reserved Characters
cannot be used inside the document.
⢠< can be mixed with tags
⢠> can be mixed with tags
⢠â the quotes start an attribute
⢠& the ampersand is also reserved
28. Entities
are used to implement reserved characters.
< --------- <
> --------- >
& --------- &
â --------- "e;
29. Entities
examples.
10 < 20
<p> 10 < 20 </p>
20 > 10
<p> 10 > 20 </p>
He said: âDonât do itâ
<p>He said: "Donât do it" </p>
Company & Co.
<p> Company & Co. </p>
31. The doctype
is required to do cross browser.
<!doctype html>
<html>
<head>
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
32. The html element
is the root of the document.
<!doctype html>
<html>
<head>
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
33. The head element
is a collection of metadata.
<!doctype html>
<html>
<head>
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
34. The body element
is the place for the content.
<!doctype html>
<html>
<head>
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
57. The meta element
represents various kinds of metadata.
<meta />
⢠name
⢠charset
⢠http-equiv
⢠content
58. The meta element
The name attribute.
<meta name=âauthorâ content=âHernan Mammanaâ />
<meta name=âcopyrightâ content=â2011â />
<meta name=âdescriptionâ content=âItâs the ... for HTML talkâ />
<meta name=âgeneratorâ content=âgDocsâ />
<meta name=âkeywordsâ content=âhtml,talk,slideshowâ />
<meta name=ârobotsâ content=âallâ />
61. The elements for text
are used to give meaning to the content.
⢠Headings
⢠h1, h2, h3, h4, h5, h6
⢠Paragraph
⢠p
⢠Inside Headings, Paragraph and List
⢠strong, em, cite, sup, sub, acronym, a
62. Headings
Examples from Home.
<h1>MercadoLibre</h1>
<h2>ClasiďŹcados</h2>
<h2>CategorĂas</h2>
<h2>Recomendados</h2>
<h2>MĂĄs vendidos de la ... </h2>
<h2>Destacados</h2>
<h2>MĂĄs Compartidos</h2>
<h2>Subastas desde $1</h2>
<h2>Historial</h2>
<h2>12 Cuotas sin interĂŠs</h2>
<h2>Imperdibles del dĂa</h2>
63. Headings
Examples for VIP.
<h1>Apple Ipod touch...</h1>
<h2>ReputaciĂłn del vendedor</h2>
<h2>Medios de pago</h2>
<h2>Medios de envĂo</h2>
67. Ordered & Unordered Lists
The most used lists on the web.
⢠Ordered List
To show rankings, prioritize tasks and search results
⢠List Item
To put anything inside the Ordered List
⢠Unordered List
To list anything without priorities
⢠List Item
To put anything inside the Unordered Lists
68. Ordered List
is used to show rankings, prioritize tasks and search results.
<ol>
<li>Apple Ipod Touch 8 Gb 4ta Generaci... </li>
<li>Apple Ipod Touch 32gb 4g 4ta Gener... </li>
<li>Apple Ipod Nano 8gb 6g 6ta Genera... </li>
</ol>
69. Unordered List
is used to list anything without priorities.
<ul>
<li>ArtĂculo nuevo </li>
<li>208 vendidos </li>
<li>Capital Federal </li>
</ul>
<ul>
<li>Efectivo </li>
<li>Visa American... </li>
<li>Tu compra esta...</li>
</ul>
70. Description List
is used to make dictionaries, screenplays and key-value pairs.
⢠It has three parts
⢠Description List element
⢠Description Term element
⢠Description DeďŹnition element
73. The table element
and all its semantic elements.
⢠The basic elements
table, tr, td, th
⢠The semantic elements
caption, thead, tbody, tfoot, colgroup, col
75. The basic elements
The semantic table elements.
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
76. The table element
The global data container.
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
77. The tr element
The row.
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
78. The th element
The header data element.
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
79. The td element
The content data element.
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
80. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
81. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
82. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
83. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
84. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
85. The semantic elements
The semantic table elements.
<table>
<caption>Itâs title of the table</caption>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
88. The semantic elements
The semantic table elements.
table
personal data purchase
ďŹrst name last name age
89. The semantic elements
The semantic table elements.
table
personal data purchase
ďŹrst name last name age
90. The semantic elements
The semantic table elements.
<table>
<caption>Title of the table</caption>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tfoot>
...
</table>
91. The semantic elements
The semantic table elements.
table
personal data age purchase
ďŹrst name last name
92. The semantic elements
The semantic table elements.
<table>
<caption>Title of the table</caption>
<colgroup>
<col />
<col />
</colgroup>
<col />
<tfoot>
...
</table>
93. The semantic elements
The semantic table elements.
<table>
<caption>Title of the table</caption>
<colgroup id=âpersonalDataâ>
<col class=âďŹrst-nameâ />
<col class=âlast-nameâ />
</colgroup>
<col class=âageâ />
<tfoot>
...
</table>
107. The form element
establishes a relationship between the user and the organization.
⢠Component of a web page
⢠They have form controls, like text ďŹelds & buttons
⢠The user can interact with them
⢠The userâs data can be sent to the server
⢠No client side scripting is needed
⢠An API is available. It augments the user experience
109. The form element
The method attribute.
<form method=âpostâ action=â/signupâ>
</form>
110. The form element
The action attribute.
<form method=âpostâ action=â/signupâ>
</form>
111. Semantic elements
for the form.
⢠ďŹeldset
is the element to group similar meaning controls
⢠legend
is the element to give a meaning to the ďŹeldset
⢠label
is the element to give meaning to a control
112. Semantic elements
for the form.
<form method=âpostâ action=â/signupâ>
<ďŹeldset>
<legend>RegĂstrate</legend>
<label>Nombre:</label>
</ďŹeldset>
</form>
113. Form controls
The elements inside the form.
⢠input,
It render very different control related to his type attribute.
⢠select
It render two list of options, single and multiple.
⢠optgroup
Semantic element to group similar options.
⢠option
Itâs a option in the select list.
⢠textarea
It render a control to multiline text.
⢠button
It render a common button. Could be user outside the form tag.
114. The input element
It has many types. Each type has a different display.
<input type=â{VALUE}â />
⢠hidden ⢠month html5
⢠text ⢠week html5
⢠search html5 ⢠time html5
⢠tel html5
⢠datetime-local html5
⢠url html5
⢠number html5
⢠ďŹle
⢠email html5 ⢠range html5 ⢠submit
⢠password ⢠color html5
⢠image
⢠datetime html5
⢠checkbox ⢠reset
⢠date html5 ⢠radio ⢠button
115. The input element
It has many types. Each type has a different display.
<input type=â{TYPE}â name=â{NAME}â id=â{ID}â />
⢠accept ⢠multiple
⢠autocomplete ⢠pattern
⢠autofocus ⢠placeholder
⢠checked ⢠readonly
⢠disabled ⢠required
⢠list ⢠size
⢠max ⢠src
⢠maxlength ⢠step
⢠min ⢠value
116. The type hidden
represents a value that isnât intended to be manipulated.
<input type=âhiddenâ />
⢠name
⢠value
117. The type text
represents a one line text edit control for the elementâs value.
<input type=âtextâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠placeholder
⢠readonly
⢠required
⢠size
118. The type text
represents a one line text edit control for the elementâs value.
<input type=âsearchâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠placeholder
⢠readonly
⢠required
⢠size
119. The type tel
represents a control for editing a telephone number.
<input type=âtelâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠placeholder
⢠readonly
⢠required
⢠size
120. The type password
represents a one line text edit control for the elementâs value.
<input type=âpasswordâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠placeholder
⢠readonly
⢠required
⢠size
121. The type email
represents a control for editing the e-mail addresses.
<input type=âemailâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠multiple
⢠placeholder
⢠readonly
⢠required
⢠size
122. The type url
represents a control for editing a single absolute URL.
<input type=âurlâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠maxlength
⢠multiple
⢠placeholder
⢠readonly
⢠required
⢠size
123. The type ďŹle
represents a list of selected ďŹles.
<input type=âďŹleâ />
⢠accept
⢠autocomplete
⢠autofocus
⢠disabled
⢠multiple
⢠placeholder
⢠readonly
⢠required
⢠size
124. The type date
represents a control for setting a string representing a date.
<input type=âdateâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
125. The type datetime
represents a control for setting a global date and time.
<input type=âdatetimeâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
126. The type month
represents a control for setting a string representing a month.
<input type=âmonthâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
127. The type week
represents a control for setting a string representing a week.
<input type=âweekâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
128. The type datetime-local
represents a control for setting a local date and time.
<input type=âdatetime-localâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
129. The type number
represents a control for setting a string representing a number
<input type=ânumberâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠max
⢠min
⢠placeholder
⢠readonly
⢠required
⢠size
⢠step
130. The type range
represents a number, but the exact value is not important.
<input type=ârangeâ />
⢠autofocus
⢠disabled
⢠max
⢠min
⢠readonly
⢠required
⢠size
⢠step
131. The type color
represents a control for setting a string simple color.
<input type=âcolorâ />
⢠autocomplete
⢠autofocus
⢠disabled
⢠placeholder
⢠readonly
⢠required
⢠size
132. The type checkbox
represents a two-state control.
<input type=âcheckboxâ />
⢠checked
⢠disabled
⢠readonly
⢠required
⢠value
133. The type radio
represents a mutually exclusive options control.
<input type=âradioâ />
⢠checked
⢠disabled
⢠readonly
⢠required
⢠value
134. The type image
represents an button from which we can add some behavior.
<input type=âimageâ />
⢠autofocus
⢠disabled
⢠readonly
⢠required
⢠src
135. The type submit
represents a button that, when activated, submits the form.
<input type=âsubmitâ />
⢠autofocus
⢠disabled
⢠required
⢠value
136. The type reset
represents a button that, when activated, resets the form.
<input type=âresetâ />
⢠autofocus
⢠disabled
⢠required
⢠value
137. The type button
represents a button with no default behavior.
<input type=âbuttonâ />
⢠autofocus
⢠disabled
⢠required
⢠value
138. The select element
represents a control for selecting amongst a set of options.
<select>
<option>Otros (Debes completar el comentario).</option>
</select>
139. The select element
Attributes.
<select> ... </select>
⢠autofocus html5
⢠multiple
⢠size
⢠required
⢠readonly
⢠disabled
⢠name
140. The select element
Examples.
<select>
<option value=âopt1â>value</option>
</select>
<select>
<optgroup label=âGroup Oneâ>
<option value=âopt1â>value</option>
</optgroup>
</select>
142. The textarea element
is used for long inputs of text.
<textarea></textarea>
⢠autofocus
⢠cols
⢠dirname
⢠disabled
⢠maxlength
⢠name
⢠placeholder html5
⢠readonly
⢠required
⢠rows
⢠wrap