{"id":7413,"date":"2021-09-09T18:51:49","date_gmt":"2021-09-09T18:51:49","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=7413"},"modified":"2021-10-26T14:36:03","modified_gmt":"2021-10-26T14:36:03","slug":"web-dev-basics-html-css","status":"publish","type":"post","link":"https:\/\/sites.la.utexas.edu\/kb\/2021\/09\/09\/web-dev-basics-html-css\/","title":{"rendered":"Web Dev Basics: HTML \/ CSS"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

In this training, you will be introduced to HTML and CSS, the languages that can be used as tools to help you develop simple websites.<\/p>\n\n\n\n

This training is designed for those who do not have a background in programming \/ not familiar with HTML and CSS. <\/p>\n\n\n\n

If this is your first time writing code, welcome! Writing code can be frustrating and confusing at times, so please reach out to a team lead for help if you get stuck at any point. Good luck and have fun!<\/p>\n\n\n\n

Introduction<\/h2>\n\n\n\n

HTML<\/h3>\n\n\n\n

HTML stands for Hypertext Markup Language, and it is the standard markup language for documents to be displayed in a web browser.<\/p>\n\n\n\n

CSS<\/h3>\n\n\n\n

CSS stands for Cascade Style Sheets, and it is a style sheet language used for describing the presentations of HTML. In other words, CSS is used to style the written HTML.<\/p>\n\n\n\n

Setting Up<\/h2>\n\n\n\n

You will be writing code and sharing it with JSFiddle. Go to https:\/\/jsfiddle.net\/<\/a> and create a new account if you don’t already have one. <\/p>\n\n\n\n

After you’ve successfully created an account and login, you should see this playground:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click Ctrl \/ Cmd + S or “Save” in the top left corner and make sure that the JSFiddle URL is something like “https:\/\/jsfiddle.net\/[your_JSFiddle_username]\/[some_random_string]\/”. If your username is not present in the URL, you might not be logging in. Make sure that you are logged in so that your work is saved.<\/strong><\/p>\n\n\n\n

Writing Basic HTML<\/h2>\n\n\n\n

HTML describes the layout of the page. An HTML file essentially “lists” out all of the elements that a web page has. Each element is contained within a a pair of tags. Take a look at this HTML block:<\/p>\n\n\n\n

<h2>This is a heading<\/h2>\n<p>This is a paragraph<\/p><\/code><\/pre>\n\n\n\n
The tags <h2><\/h2><\/code> encloses a heading element (of size 2), where as the <p><\/p><\/code> encloses a paragraph element. Notices how the closing tag has the form <\/tag_name><\/code> (with the forward slash in front of it). This is to distinguish it against the opening tag with the form <tag_name><\/code>.<\/p>\n\n\n\n
The above HTML block turns out like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Exercise: Basic HTML Elements<\/h3>\n\n\n\n
Add some headers and some paragraphs. You can center your content around anything you’d like. Here’s an example:<\/p>\n\n\n\n
<h1>\n  Schumann Geistervariationen\n<\/h1>\n<h2>\n  About the Piece\n<\/h2>\n<p>\n  The Geistervariationen (Ghost Variations), or Theme and Variations in \nE-flat major for piano, WoO 24, composed in 1854, is the last piano work of \nRobert Schumann. The variations were composed in the time leading up to his \nadmission to an asylum for the insane and are infrequently played or recorded \ntoday.\n<\/p>\n<h2>\n  History\n<\/h2>\n<p>\n  This was Schumann's last work before he was admitted to the mental hospital \nin Bonn-Endenich. Wolf-Dieter Seiffert wrote in the preface to Thema mit \nVariationen (Geistervariation) that at this time of his life, Schumann \nbelieved that he was surrounded by spirits who played him music, both \n\"wonderful\" and \"hideous\". They offered him \"most magnificent revelations\", \nbut also threatened to send him to Hell. Seiffert goes on to write that on 17 \nor 18 February 1854, Schumann wrote down a theme he said was dictated to him \nby voices like those of angels. He did not recognize that it was actually \na theme which he had composed previously. Several days later, he wrote a set \nof variations on this theme. While he was still working on the composition, \non 27 February he suddenly threw himself half clothed into the freezing \nRhine river, from which he was rescued and returned home. After surviving the \nsuicide attempt, he continued to work on it. The next day, he completed the \nwork and sent the manuscript to his wife, Clara, who had left him the \nnight before, on the advice of a doctor.\n<\/p><\/code><\/pre>\n\n\n\n
And this is how it turns out:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tips:<\/p>\n\n\n\n