To start coding your Type Specimen project open Studio Visual Code and follow the directions below. By the end of this exercise you will have a basic HTML file and the start to your coded specimen project.<\/p>\n\n\n\n
+ Create a new HTML file by opening a blank document and saving it with a “.html” extension <!DOCTYPE html> <h1>This is a Heading<\/h1> <\/body> Use W3Schools and your HTML&CSS Handbook for reference<\/strong> Text: Setting up your CSS<\/strong> Getting Started: Linking your CSS: Site Navigation: Layout: To start coding your Type Specimen project open Studio Visual Code and follow the directions below. By the end of this exercise you will have a basic HTML file and the start to your coded specimen project. + Create a new HTML file by opening a blank document and saving it with a “.html” extension+ […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3019","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7RXPP-MH","_links":{"self":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/3019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/comments?post=3019"}],"version-history":[{"count":4,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/3019\/revisions"}],"predecessor-version":[{"id":3024,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/3019\/revisions\/3024"}],"wp:attachment":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/media?parent=3019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/categories?post=3019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/tags?post=3019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
+ Start the HTML document by typing <!DOCTYPE html><\/code> to indicate the document type.
+ Next, create the HTML opening and closing tags <html><\/code> and <\/html><\/code>.
+ Inside the <html><\/code> tags, create the <head><\/code> section with opening and closing tags.
+ Inside the <head><\/code> section, create the <title><\/code> tags and give your document a title.
+ Inside the <body><\/code> section, add your content using HTML tags such as <h1><\/code> for headings, <p><\/code> for paragraphs, <a><\/code> for links, etc.
+ Save the file.
+ Open the file in a web browser to view the rendered HTML document.<\/p>\n\n\n\n
<html>
<head>
<title>Page Title<\/title>
<\/head>
<body><\/p>\n\n\n\n
<p>This is a paragraph.<\/p><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
Getting Started:
Duckett HTML & CSS handbook: Chapter 1<\/a>
Duckett HTML & CSS handbook: Chapter 8<\/a>
HTML Tutorial: W3Schools<\/a>
HTML Introduction<\/a>
HTML Basics<\/a>
HTML Elements<\/a>
HTML Attributes<\/a> <\/p>\n\n\n\n
Duckett HTML & CSS handbook: Chapter 2<\/a>
Duckett HTML & CSS handbook: Chapter 12 (controlling text)<\/a>
W3Schools: Formatting <\/a><\/p>\n\n\n\n
In Studio Visual Code create a new file
+ Save the CSS file with a .css extension, such as “styles.css”.
+ Add some basic styling to the file:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333; }
h1 {
font-size: 24px;
color: #007bff; }
+ Link the CSS file to your HTML file by adding the following line in the head section of your HTML file:
<link rel=”stylesheet” href=”styles.css”>
+ Make sure that the file path in the href attribute matches the location and name of your CSS file.
+ You can now add additional CSS rules as needed to style specific elements on your website.<\/p>\n\n\n\n
Duckett HTML & CSS: Chapter 10<\/a><\/p>\n\n\n\n
W3Schools: How To<\/a><\/p>\n\n\n\n
W3Schools: CSS Navigation <\/a><\/p>\n\n\n\n
W3Schools: The Box Model (Div Elements)<\/a>
W3Schools: Website Layout<\/a>
<\/p>\n","protected":false},"excerpt":{"rendered":"