{"id":7,"date":"2017-01-09T09:19:44","date_gmt":"2017-01-09T09:19:44","guid":{"rendered":"http:\/\/learnlearn.uk\/html\/?page_id=7"},"modified":"2017-01-12T13:49:17","modified_gmt":"2017-01-12T13:49:17","slug":"basics","status":"publish","type":"page","link":"https:\/\/learnlearn.uk\/html\/basics\/","title":{"rendered":"Website Basics"},"content":{"rendered":"\n<div class=\"arconix-tabs-horizontal\"><ul class=\"arconix-tabs\"><li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-GettingStarted\"><a class=\"\" href=\"#tab-GettingStarted\">Getting Started<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-YourFirstWebpage\"><a class=\"\" href=\"#tab-YourFirstWebpage\">Your First Webpage<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Headings\"><a class=\"\" href=\"#tab-Headings\">Headings<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Paragraphs\"><a class=\"\" href=\"#tab-Paragraphs\">Paragraphs<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Links\"><a class=\"\" href=\"#tab-Links\">Links<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Images\"><a class=\"\" href=\"#tab-Images\">Images<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Plenary\"><a class=\"\" href=\"#tab-Plenary\">Plenary<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-ActivityHomework\"><a class=\"\" href=\"#tab-ActivityHomework\">Activity \/ Homework<\/a><\/li><\/ul>\n<div class=\"arconix-panes\"><div class=\"arconix-pane pane-GettingStarted\">\n<div class=\"arconix-column-two-thirds\">\n<p><strong>What is a website?<\/strong><\/p>\n<p>A website is just a bunch of files in a directory\u00a0(and usually some sub-folders too) that is located on a computer accessible on the internet.<\/p>\n<p>These files might include:<\/p>\n<div class=\"arconix-list\" data-arconix-icon=\"fa-chevron-circle-right\" data-arconix-color=\"black\">\n<ul>\n<li>HTML Files &#8211; Each page is a html file.<\/li>\n<li>Images &#8211; Any image you want display on your site should be in the directory (or a sub-directory)<\/li>\n<li>CSS Files &#8211; These are the files that make you webpage look cool or pretty.<\/li>\n<\/ul>\n<\/div>\n<p>All websites MUST contain an <strong>index.html<\/strong> file. This is the first page that loads when someone types in your website.<\/p>\n<h4>HTML Tags<\/h4>\n<p>All HTML files contain &lt;HTML tags&gt;. These tags are used to tell the computer what a specific part of a html file does. \u00a0Most HTML tags are split in to two parts &#8211;<\/p>\n<p>Open &#8211; &lt;tagname&gt; Close &#8211; &lt;\/tagname&gt;<\/p>\n<\/div>\n<div class=\"arconix-column-one-third\">\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-thumbnail wp-image-28\" src=\"https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/folders-internet-150x150.png\" alt=\"folders-internet\" width=\"150\" height=\"150\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"arconix-pane pane-YourFirstWebpage\">\n<h3>Getting Started<\/h3>\n<p>Every html page starts out like this:<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/trinket.io\/embed\/html\/95c320f4e5\" width=\"100%\" height=\"300\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div class=\"arconix-column-one-fourth\">\n<p><strong>&lt;html&gt;<\/strong><\/p>\n<p>This tag tells your browser that this file is a html file. Everything goes inside of this tag.<\/p>\n<\/div>\n<div class=\"arconix-column-one-fourth\">\n<p><strong>&lt;head&gt;<\/strong><\/p>\n<p>Inside This tag is where you put things like<strong> external style sheets <\/strong>and<strong>\u00a0\u00a0JavaScript.<\/strong><\/p>\n<\/div>\n<div class=\"arconix-column-one-fourth\">\n<p><strong>&lt;title&gt;<\/strong><\/p>\n<p>This appears on the tab at the top of your web browser and is also displayed on search engines.<\/p>\n<\/div>\n<div class=\"arconix-column-one-fourth\">\n<p><strong>&lt;body&gt;<\/strong><\/p>\n<p>Everything that you want to appear on your page goes inside of this tag.<\/p>\n<\/div>\n<\/div>\n<div class=\"arconix-pane pane-Headings\">\n<h3>Headings<\/h3>\n<p>Headings have two purposes on web pages.<\/p>\n<div class=\"arconix-list\" data-arconix-icon=\"fa-chevron-circle-right\" data-arconix-color=\"black\">\n<ul>\n<li>Firstly they are used to make page titles and subtitles stand out from the rest of the text, helping users navigate and read your page.<\/li>\n<li>Secondly they are used by search engines to determine what the content of a web page is.<\/li>\n<\/ul>\n<\/div>\n<p><iframe loading=\"lazy\" src=\"https:\/\/trinket.io\/embed\/html\/e01f0a3553\" width=\"100%\" height=\"400\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n<div class=\"arconix-pane pane-Paragraphs\">\n<h3>Paragraphs<\/h3>\n<p><iframe loading=\"lazy\" src=\"https:\/\/trinket.io\/embed\/html\/89a2aaf25c\" width=\"100%\" height=\"400\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>When you create html files, pressing enter doesn&#8217;t add a new line &#8211; you need to use &lt;p&gt; tags to put things in to paragraphs.<br \/>\n<\/div>\n<div class=\"arconix-pane pane-Links\">\n<h3>Links<\/h3>\n<p><script src=\"https:\/\/gist.github.com\/richardbwest\/7edfca2df0d6e3951900efc4f324e687.js\"><\/script><br \/>\n<a href=\"http:\/\/google.co.uk\">I&#8217;m a link to Google<\/a><\/p>\n<p><a href=\"http:\/\/bing.com\" target=\"_blank\">I&#8217;m a link that opens in \u00a0a new tab<\/a><\/p>\n<p>You can add links to a different page using the \u00a0&lt;a&gt; tag.<\/p>\n<p>You choose to open the link in a new tab by using the <strong>target = &#8220;_blank&#8221;<\/strong> attribute.<br \/>\n<\/div>\n<div class=\"arconix-pane pane-Images\">\n<h3>Images<\/h3>\n<p><iframe loading=\"lazy\" src=\"https:\/\/trinket.io\/embed\/html\/38569fef00\" width=\"100%\" height=\"460\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nYou can add images to a web page!<br \/>\n<\/div>\n<div class=\"arconix-pane pane-Plenary\">\n<p>Have a go at this Kahoot to see what you have learned this lesson!<\/p>\n<\/div>\n<div class=\"arconix-pane pane-ActivityHomework\">\n<h3>Activity \/ Homework<\/h3>\n<p>Throughout this unit you will be building your own website, bit by bit. Your homework is to come up an idea for what your website is going to be about.<\/p>\n<p>Think about&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Website Basics - HTML &amp; CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learnlearn.uk\/html\/basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Basics - HTML &amp; CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnlearn.uk\/html\/basics\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-12T13:49:17+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/folders-internet-150x150.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnlearn.uk\/html\/basics\/\",\"url\":\"https:\/\/learnlearn.uk\/html\/basics\/\",\"name\":\"Website Basics - HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/learnlearn.uk\/html\/#website\"},\"datePublished\":\"2017-01-09T09:19:44+00:00\",\"dateModified\":\"2017-01-12T13:49:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnlearn.uk\/html\/basics\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnlearn.uk\/html\/basics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnlearn.uk\/html\/basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnlearn.uk\/html\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnlearn.uk\/html\/#website\",\"url\":\"https:\/\/learnlearn.uk\/html\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Just another My Blog site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnlearn.uk\/html\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Basics - HTML &amp; CSS","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:\/\/learnlearn.uk\/html\/basics\/","og_locale":"en_GB","og_type":"article","og_title":"Website Basics - HTML &amp; CSS","og_url":"https:\/\/learnlearn.uk\/html\/basics\/","og_site_name":"HTML &amp; CSS","article_modified_time":"2017-01-12T13:49:17+00:00","og_image":[{"url":"http:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/folders-internet-150x150.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/learnlearn.uk\/html\/basics\/","url":"https:\/\/learnlearn.uk\/html\/basics\/","name":"Website Basics - HTML &amp; CSS","isPartOf":{"@id":"https:\/\/learnlearn.uk\/html\/#website"},"datePublished":"2017-01-09T09:19:44+00:00","dateModified":"2017-01-12T13:49:17+00:00","breadcrumb":{"@id":"https:\/\/learnlearn.uk\/html\/basics\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnlearn.uk\/html\/basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnlearn.uk\/html\/basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnlearn.uk\/html\/"},{"@type":"ListItem","position":2,"name":"Website Basics"}]},{"@type":"WebSite","@id":"https:\/\/learnlearn.uk\/html\/#website","url":"https:\/\/learnlearn.uk\/html\/","name":"HTML &amp; CSS","description":"Just another My Blog site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnlearn.uk\/html\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"learnlearnadmin","author_link":"https:\/\/learnlearn.uk\/html\/author\/learnlearnadmin\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}