{"id":571,"date":"2019-05-25T19:21:13","date_gmt":"2019-05-26T02:21:13","guid":{"rendered":"http:\/\/www.wendywidgets.com\/ATasteOfTech\/?page_id=571"},"modified":"2023-11-27T19:10:34","modified_gmt":"2023-11-28T03:10:34","slug":"html-css-review","status":"publish","type":"page","link":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/","title":{"rendered":"HTML\/CSS Review"},"content":{"rendered":"\n\n\t

HTML\/CSS Review for Website Course<\/strong><\/em><\/h2>\n

Common HTML Tags<\/h3>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n
<blockquote><\/td>\n A section that is quoted from another source;
usually indented and in quotes<\/td>\n <\/tr>\n
<br><\/td>\n A single line break; has no end tag<\/td>\n <\/tr>\n
<container><\/td>\n A div block that already has preset properties<\/td>\n <\/tr>\n
<div><\/td>\n A block\/section containing other HTML; divs can be nested (see glossary)<\/td>\n <\/tr>\n
<h1>…<h6><\/td>\n Headings in decreasing order of importance<\/td>\n <\/tr>\n
<hr><\/td>\n A horizontal rule (line) to separate sections;
has no end tag<\/td>\n <\/tr>\n
<i><\/td>\n Italicized text<\/td>\n <\/tr>\n
<p><\/td>\n A block of paragraph text<\/td>\n <\/tr>\n
<span><\/td>\n In-line CSS similar to div tag, used to customize words\/phrases within text<\/td>\n <\/tr>\n
<strong><\/td>\n Bold text<\/td>\n <\/tr>\n
<u><\/td>\n Underlined text<\/td>\n <\/tr>\n
&nbsp;<\/td>\n Creates a space that is visible on a web page;
in HTML all other white space is ignored.
Not a tag, but helpful anyway!<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

HTML Images<\/h3>\n\nThe HTML tag used to link images to a web page is <img><\/strong> (this does not have an end tag). \n
\n\n<img width=”200″\n
  src=”http:\/\/www.fake.com\/laptop.jpg”\n
  alt=”Image of laptop”>\n\nAttributes:\n\n \n \n \n
width=”200″ or height=”500″<\/td>\n Optional. Note that the image is proportional, \n so typically you either set the width or the height, not both.<\/td>\n <\/tr>\n
src=”your address”<\/td>\n Required. This is the web address of your image.<\/td>\n <\/tr>\n
alt=”your words”<\/td>\n Optional. Provides alternate text for images that for some reason cannot be displayed.<\/td>\n <\/tr>\n<\/table>\n

HTML Links (or hyperlink)<\/h3>\n\nThe HTML anchor tag <a><\/strong> is used to link to a destination URL. \nNote that an end tag is required.\n
\n\n <a href=”www.fake.com\/test.html”\n
  target=”_blank”>Anchor Text<\/a>\n\nAttributes:\n\n \n \n \n
href=”your destination”<\/td>\n Required. Your destination web page.<\/td>\n <\/tr>\n
target=”_blank”<\/td>\n Optional. Opens the link in a new tab.<\/td>\n <\/tr>\n
Anchor Text<\/td>\n Required. Users click on the anchor text to reach the link target.\n This might say something like “Contact Us”.<\/td>\n <\/tr>\n<\/table>\n

Common CSS Properties<\/h3>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
background-color<\/td>\n Set the background color of a component<\/td>\n <\/tr>\n
border<\/td>\n Add a border to an element. Set the width, style and color as follows:\n
  border: 2px solid #eeeeee\n
  border: 1px dashed black<\/i><\/strong>\n
Other styles: double, dotted<\/td>\n <\/tr>\n
border-radius<\/td>\n Round the corners of an element’s outer border<\/td>\n <\/tr>\n
color<\/td>\n Set the color of the text<\/td>\n <\/tr>\n
font-family<\/td>\n Specifies the font for an element, such as “Times New Roman” or “Arial”.\n Your Weebly theme provides a list of its supported fonts.<\/td>\n <\/tr>\n
font-size<\/td>\n Define the size of the text either in pixels (px), or relative to parent element (%),\n or in em units which is relative to the current<\/i> font-size (2em means twice the size \n of the current font). Using em makes the font scalable across multiple devices.\n <\/td>\n <\/tr>\n
font-style<\/td>\n Set font style: normal, italic<\/td>\n <\/tr>\n
font-weight<\/td>\n Set the thickness of the text characters: normal, bold, bolder, lighter<\/td>\n <\/tr>\n
line-height<\/td>\n Determines the amount of space above and below the text. \n Helpful when you find lines in paragraphs or multi-line headers too far apart.\n Typically set in a unitless value (e.g. line-height: 1.5) so that it is proportional to the font-size.<\/td>\n <\/tr>\n
margin<\/td>\n Add space around the outside of an element. \n To center an element, use
\n “margin: 0 auto”.<\/td>\n <\/tr>\n
padding<\/td>\n Clear an area around the content (text, image) inside an element<\/td>\n <\/tr>\n
span<\/td>\n Used to group elements for styling purposes (using the class or id attributes).\n For example, changing color or font weight for certain words within a paragraph <p>.<\/td>\n <\/tr>\n
text-align<\/td>\n Specify the horizontal alignment of text in an element (right, left, center)<\/td>\n <\/tr>\n
width<\/td>\n Set the width of an element not including padding, borders or margins. The min-width<\/i><\/strong> and max-width<\/i><\/strong> properties override the width property. Width can be set as % or in pixels (px).<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

CSS Hovering<\/h3>\n\nThe :hover<\/strong> selector is used to select elements when your mouse hovers over them, thereby providing the option to change the styling of the element. \n

\nIn this example, an h1 header is black by default, but when hovering over the header the color of the text changes to pink.\n\n\nh1 {\n
   color: black;\n
}\n
h1:hover {\n
   color: pink;\n
}\n\n\n","protected":false},"excerpt":{"rendered":"

HTML\/CSS Review for Website Course Common HTML Tags <blockquote> A section that is quoted from another source;usually indented and in…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-571","page","type-page","status-publish","hentry"],"yoast_head":"\nHTML\/CSS Review - A Taste of Tech<\/title>\n<meta name=\"description\" content=\"A-Taste-of-Tech offers Website Development boot camps and private classes. This HTML\/CSS list captures what the students will learn during camp.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/html-css-review\\\/\",\"url\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/html-css-review\\\/\",\"name\":\"HTML\\\/CSS Review - A Taste of Tech\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/#website\"},\"datePublished\":\"2019-05-26T02:21:13+00:00\",\"dateModified\":\"2023-11-28T03:10:34+00:00\",\"description\":\"A-Taste-of-Tech offers Website Development boot camps and private classes. This HTML\\\/CSS list captures what the students will learn during camp.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/html-css-review\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/html-css-review\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/html-css-review\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\\\/CSS Review\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/#website\",\"url\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/\",\"name\":\"A Taste of Tech\",\"description\":\"empowering girls to embrace technology\",\"publisher\":{\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/#\\\/schema\\\/person\\\/1954d9921aa08828b690e57c838cc280\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/#\\\/schema\\\/person\\\/1954d9921aa08828b690e57c838cc280\",\"name\":\"Wendy\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/final_ww_logo.png\",\"url\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/final_ww_logo.png\",\"contentUrl\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/final_ww_logo.png\",\"width\":238,\"height\":238,\"caption\":\"Wendy\"},\"logo\":{\"@id\":\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/final_ww_logo.png\"},\"sameAs\":[\"https:\\\/\\\/wendywidgets.com\\\/ATasteOfTech\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML\/CSS Review - A Taste of Tech","description":"A-Taste-of-Tech offers Website Development boot camps and private classes. This HTML\/CSS list captures what the students will learn during camp.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/","url":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/","name":"HTML\/CSS Review - A Taste of Tech","isPartOf":{"@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/#website"},"datePublished":"2019-05-26T02:21:13+00:00","dateModified":"2023-11-28T03:10:34+00:00","description":"A-Taste-of-Tech offers Website Development boot camps and private classes. This HTML\/CSS list captures what the students will learn during camp.","breadcrumb":{"@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/html-css-review\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wendywidgets.com\/ATasteOfTech\/"},{"@type":"ListItem","position":2,"name":"HTML\/CSS Review"}]},{"@type":"WebSite","@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/#website","url":"https:\/\/wendywidgets.com\/ATasteOfTech\/","name":"A Taste of Tech","description":"empowering girls to embrace technology","publisher":{"@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/#\/schema\/person\/1954d9921aa08828b690e57c838cc280"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wendywidgets.com\/ATasteOfTech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":["Person","Organization"],"@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/#\/schema\/person\/1954d9921aa08828b690e57c838cc280","name":"Wendy","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-content\/uploads\/2019\/06\/final_ww_logo.png","url":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-content\/uploads\/2019\/06\/final_ww_logo.png","contentUrl":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-content\/uploads\/2019\/06\/final_ww_logo.png","width":238,"height":238,"caption":"Wendy"},"logo":{"@id":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-content\/uploads\/2019\/06\/final_ww_logo.png"},"sameAs":["https:\/\/wendywidgets.com\/ATasteOfTech\/"]}]}},"_links":{"self":[{"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":37,"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":1598,"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/pages\/571\/revisions\/1598"}],"wp:attachment":[{"href":"https:\/\/wendywidgets.com\/ATasteOfTech\/wp-json\/wp\/v2\/media?parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}