CSS Tutorial HTML: Hypertext Markup Language HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The articles below can help you learn more about HTML.
Mini Convention CSS Originellement conçu pour des web designers, CSS se veut être un langage de description et non de programmation. Mais ça c'était avant. Le Web a évolué, nos usages et consommations également. CSS s'adapte petit à petit au contexte actuel et se complexifie pour devenir "un vrai langage" (avec variables, calculs et fonctions, notamment). En attendant une hypothétique stabilisation du langage, nous en sommes aujourd'hui à déplorer des feuilles CSS de taille astronomique et de moins en moins maintenables en production. Par exemple, sur le site alsacreations.com (hors forum), sur un fichier CSS de 32ko, l'outil StyleStats ne dénombre pas moins de : 46 occurences de ! Une convention pour éviter la bidouille Pour améliorer notre quotidien d'intégrateur, l'agence Alsacréations s'est constitué une mini Convention CSS contenant toutes les bonnes pratiques qui nous paraissent essentielles à ce beau langage qu'est CSS. Lien vers la présentation :
How-To: Create an iPhone Web App The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but what if you just want to design a site or form that looks like a native iPhone App? This is where iWebKit comes in. iWebKit is a free framework package for creating websites and applications that are optimized for the iPod Touch, iPhone & iPad. The bulk of the framework is CSS3 which can work its magic to makeover any dreadful site and make it look fresh. I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. When designing for the iPhone OS, you should use the iPhone simulator available in the SDK to get an idea of where your design is heading. Getting Started Here is what the form looks like on the iPhone before we optimize it. It’s pretty dull looking, to say the least. This code needs to be in an HTML file in the same folder as the iWebKit framework. Replace the original code: Replace:
Documentation for Visual Studio Code Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET). Begin your journey with VS Code with these introductory videos. Visual Studio Code in Action Intelligent Code Completion Code smarter with IntelliSense - completions for variables, methods, and imported modules. Streamlined Debugging Print debugging is a thing of the past. In-Product Source Control Speed up your release cycle with SCM support inside your editor, including rich Git integration. Top Extensions Enable additional languages, themes, debuggers, commands, and more. See more in the Marketplace First Steps To get the most out of Visual Studio Code, start by reviewing a few introductory topics: Settings - Customize VS Code for how you like to work. Why VS Code?
Getting Started Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user. Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. To begin, identify the section of the page that is "about" the movie Avatar. Back to top 1d.
Getting Started with iOS Web Apps: Introduction An iOS web application—or iOS web app—uses Web 2.0 technologies to deliver a focused solution that looks and behaves like a built-in iOS application. iOS web apps run in Safari on iOS, the unique implementation of Safari that provides full-featured web browsing on iOS-based devices and responds to touch-based gestures. Start Here To develop a great iOS web app you need to: Optimize your web content for Safari on iOSDesign a user experience and user interface that follows Apple’s guidelines Choose next how you want to get started—by reading about the basics, getting your hands on some code, or diving into specific technologies. Want to get familiar with the fundamentals? “Optimizing Web Content” and “Configuring Web Applications” describe how to begin the process of transforming your web content into an iOS web app.iOS Human Interface Guidelines introduces many of the user experience and user interface guidelines that govern great iOS web apps. Prefer to learn by doing? Go In Depth
HTML Basics | FabAcademy - Tutorials Original tutorial by: Krisjanis RijnieksYour lab name: Aalto FablabLicense: CC-SA-BYLast Review Date: 22 Jan 2019Last Modified by: Krisjanis Rijnieks Summary During my Fab Academy experience I noticed that many students without background in web development have problems grasping the way HTML is generally taught. A website can be build using plain HTML. Step 1. HTML is a markup language initiated by Tim Berners-Lee. The first specification of HTML contained 18 elements. However HTML is less about web design as it is about structure of a document. Step 2. HTML document is a plain text file, usually with an extension .html. Create a new directory somewhere on your computer. html is a good name for it. html └── index.html I am calling the file index.html because usually it is the first file your web browser is looking for when you open a website. By using your text editor, add the following content to the index.html file and save it. <h1>Hello! Open it in your web browser of choice. Step 4. <!
Microdata et Schema.org, la sémantique chirurgicale Les dispositifs mettant en exergue la sémantique qui permet notamment aux moteurs de recherche d'appréhender des informations précises sur le contenu d'une page Web ont été valorisés par l'avènement de la technologie Microdata dans HTML5. Fort des expérimentations en matière de balisage sémantique fournies par les microformats, on a pu mettre en place une syntaxe permettant de faciliter ce type de mise en évidence. Les microformats avant HTML5 Difficile de trouver une date précise, mais il semblerait qu'ils existent depuis envrion 2003 avec l'arrivée de XFN, et prennent des formes variées. De manière générale les μF utilisent les attributs existants (classes, rel) de HTML et cherchent à simplifier l'utilisation de certaines données par les programmes (logiciels) auxquels ils s'adressent. Les informations peuvent être marquées de différentes manières : Pour aller plus loin, consultez Les microformats et Les microformats 2. Microdata avec HTML5 Comment inclure des Microdatas ? itemprop itemref
From Google Ventures, The 6 Ingredients You Need To Run A Design Sprint [Editor’s note: This is the second post in a seven-part guide on how to conduct your own Google Ventures’ five-day design sprint. Read the first part, on why you should conduct a sprint, here. See more at Google Ventures’s site, Design Staff]. At the Google Ventures Design Studio, we have a five-day process for taking a product or feature from design through prototyping and testing. We call it a product design sprint. Now that you know what design sprints are good for, you’ll need a few important ingredients to make yours successful. 1. The first thing you need is an important design problem, and if you work at a startup, chances are good you probably have one lying around the office. As long as it’s an important problem, it’s perfect for a design sprint. 2. The ideal sprint team is between four and eight people, but you can get by with more or fewer than that. • Designer: If your startup doesn’t have a designer yet, try to bring in a ringer. 3. 4. 5. 6. OK, the stage is set.
MDN Web Docs