HTML & CSS Essentials: Structuring, Styling, and Embedding
This comprehensive guide covers everything from essential HTML and CSS tags to structuring web pages, formatting text, handling links and images, creating lists, tables, forms, and incorporating scripts and styles. Explore the core elements of web development with this informative resource.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HTML & CSS Jan Janou ek
Sources HTML: http://htmldog.com/reference/htmltags/ http://www.w3schools.com/tags/ http://www.w3.org/TR/html5/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element CSS: http://www.w3schools.com/css/default.asp http://www.w3schools.com/cssref/ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference http://tympanus.net/codrops/css_reference/
Structural tags html head body div span
Meta Information DOCTYPE title link meta style
Text formating p - paragraph h1, h2, h3, h4, h5, and h6 - heading strong / b strong / bold em / i emphasis/italic blockquote cite code pre preformatted text br - line break hr - horizontal rule sub, sup subscript/superscript
Links and images a href hrypertext reference target (_blank, _self, _top, _parent) rel (nofollow, noreferrer, help, alternate, etc.) img - image src - source alt alternative text width height
Lists ul unondered list ol ordered list li list item dl description list dt defines term dd defines description
Tables table tr table row td table data cell rospan, colspan th table header cell tbody table body thead table head tfoot table footer caption
Forms Form action, method, enctype input type, name textarea select option optgroup button label for fieldset
Scripts & Styles script src type <script type="text/javascript" src="somescript.js"></script> <script type="text/javascript"> </script> style type <style type="text/css"> </style> link href rel relationship type <link rel="stylesheet" type="text/css" href="default.css" />
CSS In-line Internal External
Selectors Patterns used to select the element(s) you want to style Element type div, p, span, . HTML attributes ID (#_ _ _), class (._ _ _) Attribute selectors [attr], [attr=value], [attr^=value], Universal selectors - * Pseudo classes - :hover, :link, :focus, Combinators div p - descendant div > p - child input + p - adjacent sibling input ~ span - general sibling More in CSS3
Properties color background-color border font-size float position width / height padding margin . many others
Values Size px % em ex pt vh, vw pc, cm, mm, in. Color #ff0000 #f00 red rgb(255,0,0) rgb(100%,0%,0%) rgba(255, 255, 255, 0.5)
Task of the day go throught tutorial: https://www.codecademy.com/en/tracks/web
