From here, there are two ways you can work on this training. You can either ssh into the server and work directly from there, or create local files on your computer and transfer them to the server later. Please check in with a team lead to choose the method accordingly.<\/p>\n\n\n\n
Method 1: Work Directly on the Server with SSH<\/h3>\n\n\n\n- Connect to the UT VPN. If you need help to get this set up, please refer to this documentation here https:\/\/liberalarts.utexas.edu\/web-admin-help\/how-to-use-cascade\/how-to-log-in.php<\/a>.<\/li>
- Launched VSCode. Install the ssh extension.
- Click on this icon to the left to open the extensions explorer.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.21.38-PM.png\")
<\/figure><\/li>- In the search bar, type “ssh” and click on the Remote – SSH extension.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.23.22-PM.png\")
<\/figure><\/li>- Install that extension. <\/li><\/ul><\/li>
- Configure Remote SSH
- Click on the SSH icon (looks like ><) on the bottom left corner of the VSCode window. If you don’t see this icon, close VSCode and relaunch it.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.30.48-PM.png\")
<\/figure><\/li>- A dropdown will appear at the top of the VSCode window. Choose “Open Configuration File.”
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.34.01-PM.png\")
<\/figure><\/li>- Edit the configuration file. The path will look a little different on your computer, but it should look something similar to [some-path]\/.ssh\/config. Click on that file. For reference, mine looks like this.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.44.12-PM.png\")
<\/figure><\/li>- After clicking on it, paste in this configuration format and replace the text after User with your EID.
Host file.laits.utexas.edu
HostName file.laits.utexas.edu
User [replace this text and brackets with your eid]
ForwardX11 yes<\/pre><\/li>
- Your config file should look something like this.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.44.59-PM.png\")
<\/figure><\/li>- Save and close the file. Click on the Remote SSH icon in the bottom left of the screen again. Click “Remote SSH: Connect to Host,” then choose “files.laits.utexas.edu.” You will be prompted to enter your password. Please enter the password to your UTEID. You will do this every time you begin the training.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.51.04-PM-1024x768.png\")
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-12-at-4.51.53-PM.png\")
<\/figure><\/li><\/ul><\/li>- Set up the public_html folder.
- In VSCode, click Ctrl \/ Cmd + O. Navigate to your folder. Type in the path to your folder. It should be
\/mnt\/home\/[your-EID]<\/code>
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.17.36-AM.png\")
<\/figure><\/li>- Click “OK.”<\/li>
- On the top toolbar of VSCode, click Terminal > New Terminal.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.20.15-AM.png\")
<\/figure><\/li>- A terminal window will pop up at the bottom like this.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.21.48-AM-1024x578.png\")
<\/figure><\/li>- Click on the terminal window. Now type in these exact same command. Hit Return \/ Enter after each command. Please be extra cautious when doing this so that you do not affect other folders \/ files.
mkdir public_html<\/code>
cd ..<\/code>
chmod 755 [your-EID]<\/code>
chmod 755<\/code> [your-EID]\/public_html<\/code>
cd [your-eid]\/public_html<\/code>
The last 4 commands look like this. Make sure you do the first command (mkdir public_html) as well.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.41.24-AM-1024x168.png\")
<\/figure><\/li>- Now click on the File icon to the top left to toggle the File tab.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.43.32-AM-1024x578.png\")
<\/figure><\/li>- Ctrl \/ Cmd + N > Ctrl \/ Cmd + S and save the new file as index.html. Make sure your file path looks like this. Click “OK.”
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-11.47.06-AM.png\")
<\/figure><\/li>- Now you’re all set to start writing your HTML, CSS, and JavaScript.<\/li><\/ul><\/li><\/ol>\n\n\n\n
Method 2: Edit Local Files<\/h3>\n\n\n\n- Create a new folder named “public_html” on your computer. This will be where you put all of your files for this training. Make sure you remember where you put it.
<\/li>- Open VSCode. Cmd \/ Ctrl + O and open the folder you just organized. This is just like opening up a file on your computer.<\/li>
- Ctrl \/ Cmd + N > Ctrl \/ Cmd + S to create a new file and Save. Save it as “index.html”<\/li>
- Now you can see your changes on the\u00a0local\u00a0<\/strong>url on the browser. So for example, I saved my index.html under the directory \/Users\/nhaithuy\/UT Austin\/STA\/Basic Training\/HTML-CSS-Test\/index.html, so my browser url looks like this.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/screenshot2-1024x557.png\")
<\/figure><\/li>- Every time you write new code, just refresh the page and it should work. If you don\u2019t see the changes, try hard refreshing (Cmd \/ Ctrl + Shift + R) to prevent browser caching. <\/li><\/ol>\n\n\n\n
Writing HTML<\/h2>\n\n\n\n
HTML is a markup language, meaning that it uses tags to define the elements displayed, and the tags themselves are not displayed. For example, an HTML p tag displays a paragraph. <\/p>\n\n\n\n
Most HTML tags come in pairs. To begin a tag, type <[tag-name]><\/code>. To end a tag, type <\/[tag-name]><\/code>.<\/p>\n\n\n\nFor example, for the p tag:
<p>This is a paragraph<\/p><\/code><\/p>\n\n\n\nDon’t worry if this seems confusing, you’ll get a hang of it as you work on this training.<\/p>\n\n\n\n
To start, place this code below to your HTML file.<\/p>\n\n\n\n
<!doctype html>\n\n<html lang=\"en\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\n\n <title>HTML \/ CSS Training Test Site<\/title>\n\n<\/head>\n\n<body>\n <!-- your code will go here -->\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nIt should look like this.<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.17.37-PM.png\")
<\/figure>\n\n\n\n- In your browser, go to https:\/\/laits.utexas.edu\/~[your-eid]\/index.html (or, if you work on your local computer, Ctrl \/ Cmd + O, navigate to your public_html folder, and open up index.html) and make sure that there is a blank page (no errors). If there are any errors. please reach out to the training lead for help.<\/li>
- You will write your code between the
<body> <\/body><\/code> tags. First, try:
<h1>This is a heading<\/h1><\/code>
<p>This is a paragraph. There should be some more text here. More text more text more text . . . <\/p><\/code>
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.30.40-PM.png\")
<\/figure><\/li>- Refresh your browser. You should see this.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.32.42-PM-1024x536.png\")
<\/figure><\/li>- Here’s a list of HTML tags for your reference https:\/\/www.w3schools.com\/tags\/default.asp<\/a>. Take a glance at it but don’t worry about knowing all of it. If you need to look up something you’d like to achieve on your site at anytime, you’re welcome to go back to the reference or simply Google what you want. Most likely, the ones you’d use the most are these listed below. Please read through their description on the HTML reference page:
<p><\/p><\/code><\/li><h1><\/h1><\/code>, or any of the numbered heading (<h2>, <h3>, <h4>, etc.<\/code>). The smaller the number, the smaller the header.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.39.28-PM.png\")
<\/figure><\/li><img><\/code>. Notice that this one doesn’t have a closing tag<\/li><a><\/a><\/code><\/li><div><\/div><\/code><\/li><b><\/b><\/code> and <i><\/i><\/code><\/li><\/ul><\/li><\/ol>\n\n\n\nSimple Headings and Paragraphs<\/h3>\n\n\n\n
Start creating a few headings and paragraphs under each heading. Please have a minimum of 3 headings and 3 paragraphs. It should follow the format: heading – paragraph – heading – paragraph – and so on. For example:<\/p>\n\n\n\n
a<h1>Life of the Virtuoso<\/h1>\n <p>Franz, or Ferencz Liszt, was a Hungarian composer, \nvirtuoso pianist, conductor, teacher, arranger, and \norganist of the Romantic era. He was a prolific composer and \nwas one of the most prominent representatives of the New \nGerman School. Among Liszt's musical contributions were \nsymphonic poems, thematic transformation, and harmony \ninnovations.<\/p>\n\n <h1>The Pianist<\/h1>\n <p>Liszt was, no doubt, one of the greatest piano virtuoso \never lived. Carl Czerny, Liszt's teacher, claimed that Liszt \nwas a natural who played according to feeling, and reviews \nof his concerts especially praise the brilliance, strength, \nand precision. His ability to keep absolute tempo was also \nmentioned.<\/p>\n\n <h2>Liszt's quote<\/h2>\n <p>Mournful and yet grand is the destiny of the artist.<\/p><\/code><\/pre>\n\n\n\nRenders:<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.52.56-PM-1024x188.png\")
<\/figure>\n\n\n\n- Have at least 3 bolded text and 3 italicized text. To do this, simply wrap the text you want bold or italicized in either
<b><\/b><\/code> or <i><\/i><\/code> tags, respectively. For example:
<p><b>Mournful<\/b> and yet <b>grand<\/b> is the <i>destiny<i> of the artist.<\/p><\/code>
becomes:
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-12.58.39-PM.png\")
<\/figure><\/li>- You can also nest HTML tags. For example, if you want text to be both bolded and italicized:
<p><i><b>Mournful<\/b> and yet <b>grand<\/b> is the destiny of the artist.<\/i><\/p><\/code>
becomes:
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-1.25.47-PM.png\")
<\/figure><\/li><\/ol>\n\n\n\nThe Div Tag<\/h3>\n\n\n\n
The <div><\/div><\/code> is a very common and powerful element in HTML. It is essentially a boxed container for your content. It allows you to group elements and apply desired stylings for them. <\/p>\n\n\n\nIn this section, let’s practice creating a paragraph with a div. You’ll see that it looks just like the <p><\/p><\/code> tag, but we’ll be applying styles to it later in the CSS section.<\/p>\n\n\n\nAdd a paragraph with the text of your choice anywhere on the page. For example:<\/p>\n\n\n\n
<div>Liszt was born in the village of Doborj\u00e1n in the \nKingdom of Hungary, Austrian Empire in 1811. Liszt's father \nplayed the piano, violin, cello, and guitar, and thus Liszt \nwas taught piano at the age of seven and began composing at \neight. After his concert debut at the age of nine, he was \nsponsored to study music in Vienna. Liszt moved to Paris \nstarting 1827, after his father's death. He gave piano \nlessons and composition lessons to earn money, often from \nearly morning until late at night. He took up smoking and \ndrinking, habits he would continue throughout his life.\n<\/div><\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-14-at-3.42.30-PM.png\")
<\/figure>\n\n\n\nIt renders out to:<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-14-at-3.43.22-PM-1024x201.png\")
<\/figure>\n\n\n\nSection Checklist: Did you . . .<\/span><\/h3>\n\n\n\n- Add at least 3 Headings and Paragraphs?<\/span><\/li>
- Add at least 3 Bolded text?<\/span><\/li>
- Add at least 3 Italicized text?<\/span><\/li>
- Add at least 1 paragraph using a Div element?<\/span><\/li><\/ul>\n\n\n\n
Write CSS<\/h2>\n\n\n\nCreate and Link the Stylesheet file<\/h3>\n\n\n\n- Ctrl \/ Cmd + N to create a new file. Ctrl \/ Cmd + S and save it as “styles.css” within the public_html folder.<\/li>
- In your index.html, between the
<head><\/head><\/code> tags, place this code
<link rel=\"stylesheet\" href=\".\/styles.css\"><\/code>
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-13-at-1.33.27-PM.png\")
<\/figure>This reads “link the stylesheet in the same folder (.\/ means same folder) which has the name of styles.css.”<\/li>- Now let’s test that your CSS file was linked correctly. In that file “styles.css,” paste in this code (this will only be for testing, we’ll remove it later)
p {<\/code>
color: red;<\/code>
}<\/code><\/li>- Save the file, and Refresh your browser. To prevent the browser from caching the old file, perform a hard refresh with Ctrl \/ Cmd + Shift + R.<\/li>
- Check that all of your
<p><\/p><\/code> elements are red.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-14-at-4.04.06-PM-1024x218.png\")
<\/figure>
If it doesn’t change: - Check that your linking path is correct<\/li>
- Check that “styles.css” is in the same folder as your “index.html”<\/li><\/ul><\/li>
- Now you can delete that code (if you wish) and apply your own stylings.<\/li><\/ol>\n\n\n\n
CSS Selectors<\/h3>\n\n\n\n
In the above section, we “selected” all the <p><\/p><\/code> elements on the page and gave it stylings. In this section, we’ll learn about different ways to “select” an HTML element and give it proper stylings.<\/p>\n\n\n\nCSS Element Selector<\/h4>\n\n\n\n
The way we were doing it before, typing:
p {<\/code>
color: red;<\/code>
}<\/code>
is called Element selector, in which we select all <p><\/p><\/code> elements and apply stylings. Let’s practice using the CSS Selector.<\/p>\n\n\n\n- Try changing color of all of your headers. For example:
h2 {<\/code>
color: #a62639;<\/code>
}<\/code>
changes the color of all the h2 headers into that HEX code, a crimson color.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-14-at-4.22.12-PM-1024x206.png\")
<\/figure><\/li>- Now try changing the font size of all your
<p><\/p><\/code> elements. In “styles.css,” try:
p {<\/code>
font-size: 18px;<\/code>
} <\/code>
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-19-at-4.32.32-PM-1024x218.png\")
<\/figure><\/li>- Notice how the text in the
<div><\/div><\/code> elements are not affected. Guess what happen if you use the CSS element selector to select the <div><\/div><\/code> tags?<\/li><\/ol>\n\n\n\nCSS ID Selector<\/h4>\n\n\n\n
What if you want to apply stylings to a specific div <\/strong>element and not any div visible on the page? <\/p>\n\n\n\nCSS ID Selector allows you to give your generic element a specific ID, so that every time you refer to that ID it is scoped to that element only. The HTML syntax for giving an element an ID is:
<element id=\"[element-id]\">Some stuff<\/element><\/code>
So, for example, if you want to give a div an ID of “my-div,” you’d write:
<div id=\"my-div\">My text here<\/div><\/code>
This applies to any element, and not just div. You can easily give an id to a header as well.
<h2 id=\"my-header\">Title<\/h2><\/code><\/p>\n\n\n\nNow, in your CSS file, select that ID following this syntax:
#[element-id] {<\/code>
\/* some stylings here *\/<\/code>
}<\/code><\/p>\n\n\n\nSo for example, to apply stylings to the div and header above:
#my-div {<\/code>
background-color: lightblue;<\/code>
}<\/code>
#my-header {<\/code>
font-style: italic;<\/code>
}<\/p>\n\n\n\nThis HTML and CSS here:<\/p>\n\n\n\n
\n\n<h2 id=\"quote-header\">Liszt's quote<\/h2>\n <p><i><b>Mournful<\/b> and yet \n<b>grand<\/b> is the destiny of the \nartist.<\/i><p>\n\n <div id=\"childhood\">Liszt was born \nin the village of Doborján in \nthe Kingdom of Hungary, Austrian \nEmpire in 1811. Liszt's father played \nthe piano, violin, cello, and guitar, \nand thus Liszt was taught piano at \nthe age of seven and began composing \nat eight. After his concert debut at \nthe age of nine, he was sponsored to \nstudy music in Vienna. Liszt moved to \nParis starting 1827, after his \nfather's death. He gave piano lessons \nand composition lessons to earn \nmoney, often from early morning until \nlate at night. He took up smoking and \ndrinking, habits he would continue \nthroughout his life.<\/div><\/code><\/pre>\n<\/div>\n\n\n\n\n#quote-header {\n text-\ndecoration: underline;\n font-style: \nitalic;\n}\n\n#childhood {\n background-\ncolor: #a62639;\n color: \nwhite;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nGives this result:<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-19-at-4.59.45-PM-1024x95.png\")
<\/figure>\n\n\n\nCSS Class Selector<\/h4>\n\n\n\n
Similarly, what if you want to give the same stylings to a specific group <\/strong>of elements? The CSS class selector allows you to do that. The HTML syntax for giving an element a class is:
<element class=\"[element-class]\">Some stuff<\/element><\/code>
For example, to give a class name to a div:
<div class=\"my-div\">Some text<\/div><\/code>
<div class=\"my-div\">Another text<\/div><\/code>
Or to an anchor tag:
<a class=\"my-anchor\" href=\"my-url\">Hyperlinked Text<\/a><\/code><\/p>\n\n\n\nIn your CSS file, select the class you want following this syntax:
.[element-class] {<\/code>
\/* some stylings here *\/<\/code>
}<\/code>
For example:
.my-div {<\/code>
border: 2px solid red;<\/code>
padding: 10px;<\/code>
margin: 10px;<\/code>
}<\/p>\n\n\n\nThis HTML and CSS:<\/p>\n\n\n\n
\n\n<h2>Life of the Virtuoso<\/h2>\n <p class=\"bordered-\nparagraph\">Franz, or Ferencz Liszt, \nwas a Hungarian composer, virtuoso \npianist, conductor, teacher, \narranger, and organist of the \nRomantic era. He was a prolific \ncomposer and was one of the most \nprominent representatives of the New \nGerman School. Among Liszt's musical \ncontributions were symphonic poems, \nthematic transformation, and harmony \ninnovations.<\/p>\n\n <h2>The Pianist<\/h2>\n <p class=\"bordered-paragraph\">Liszt \nwas, no doubt, one of the greatest \npiano virtuoso ever lived. Carl \nCzerny, Liszt's teacher, claimed that \nLiszt was a ntural who played \naccording to feeling, and reviews of \nhis concerts especially praise the \nbrilliance, strength, and precision. \nHis ability to keep absolute tempo \nwas also mentioned.<\/p><\/code><\/pre>\n<\/div>\n\n\n\n\n.bordered-paragraph {\n border: 2px solid #a62639;\n padding: 10px;\n margin: 10px;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nGives this result:<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-20-at-11.18.44-AM-1024x156.png\")
<\/figure>\n\n\n\nNow practice using all 3 types of CSS Selectors on your site.<\/p>\n\n\n\n
Section Checklist: Did you . . .<\/span><\/h3>\n\n\n\n- Use the CSS Element Selector?<\/span><\/li>
- Use the CSS ID Selector?<\/span><\/li>
- Use the CSS Class Selector?<\/span><\/li><\/ul>\n\n\n\n
Housekeeping Practices and Miscellaneous Information<\/h2>\n\n\n\n
When writing HTML \/ CSS or any code, it is good practice to comment your code as you go. This will not only help with your logic and organization, but also for the person reading \/ modifying it.<\/p>\n\n\n\n
The syntax for writing comments in HTML is:
<!-- your comment here --><\/code>
For example:
<!-- start of my hyperlinks --><\/code>
<a href=\"url-1\" target=\"blank\">Link 1<\/a><\/code>
<a href=\"url-2\" target=\"blank\">Link 2<\/a><\/code>
<a href=\"url-3\" target=\"blank\">Link 3<\/a><\/code>
<!-- end of my hyperlinks --><\/code><\/p>\n\n\n\nThe syntax for writing comments in CSS is:
\/* your comment here *\/<\/code>
For example:
\/* styles for my footer *\/<\/code>
.branding {<\/code>
width: 200px;<\/code>
margin: 30px; \/* gives it some white space *\/<\/code>
}<\/code>
\/* end styles for my footer *\/<\/code><\/p>\n\n\n\nThe syntax for writing comments in JS is:
\/\/ your comment here<\/code>
For example:
\/\/ start code for the accordion<\/code>
function myAccordion() {<\/code>
document.getElementById(\"accordion\");<\/code>
\/\/ do more stuff<\/code>
};<\/code><\/p>\n\n\n\nIn VSCode, the shorthand for comment is Ctrl \/ Cmd + \/ <\/p>\n\n\n\n
In addition, the Browser Inspect tool will be very helpful in helping you design your site. When you run into any trouble (i.e. something not showing up correctly), this should be the first place to refer to. Please read through Part 1 of this training here http:\/\/sites.la.utexas.edu\/kb\/2020\/07\/29\/how-to-create-a-clio-course-module-part-2\/<\/a> to familiarize yourself with this tool.<\/p>\n\n\n\nTemplate Prep<\/h2>\n\n\n\n
- Click on this icon to the left to open the extensions explorer.<\/figure><\/li>
- In the search bar, type “ssh” and click on the Remote – SSH extension.
<\/figure><\/li>- Install that extension. <\/li><\/ul><\/li>
- Configure Remote SSH
- Click on the SSH icon (looks like ><) on the bottom left corner of the VSCode window. If you don’t see this icon, close VSCode and relaunch it. <\/figure><\/li>
- A dropdown will appear at the top of the VSCode window. Choose “Open Configuration File.”
<\/figure><\/li>- Edit the configuration file. The path will look a little different on your computer, but it should look something similar to [some-path]\/.ssh\/config. Click on that file. For reference, mine looks like this.
<\/figure><\/li>- After clicking on it, paste in this configuration format and replace the text after User with your EID.
Host file.laits.utexas.edu
HostName file.laits.utexas.edu
User [replace this text and brackets with your eid]
ForwardX11 yes<\/pre><\/li>- Your config file should look something like this.
<\/figure><\/li>- Save and close the file. Click on the Remote SSH icon in the bottom left of the screen again. Click “Remote SSH: Connect to Host,” then choose “files.laits.utexas.edu.” You will be prompted to enter your password. Please enter the password to your UTEID. You will do this every time you begin the training.
<\/figure><\/li><\/ul><\/li>- Set up the public_html folder.
- In VSCode, click Ctrl \/ Cmd + O. Navigate to your folder. Type in the path to your folder. It should be
\/mnt\/home\/[your-EID]<\/code><\/figure><\/li>- Click “OK.”<\/li>
- On the top toolbar of VSCode, click Terminal > New Terminal.
<\/figure><\/li>- A terminal window will pop up at the bottom like this.
<\/figure><\/li>- Click on the terminal window. Now type in these exact same command. Hit Return \/ Enter after each command. Please be extra cautious when doing this so that you do not affect other folders \/ files.
mkdir public_html<\/code>cd ..<\/code>chmod 755 [your-EID]<\/code>chmod 755<\/code>[your-EID]\/public_html<\/code>cd [your-eid]\/public_html<\/code>
The last 4 commands look like this. Make sure you do the first command (mkdir public_html) as well.<\/figure><\/li>- Now click on the File icon to the top left to toggle the File tab.
<\/figure><\/li>- Ctrl \/ Cmd + N > Ctrl \/ Cmd + S and save the new file as index.html. Make sure your file path looks like this. Click “OK.”
<\/figure><\/li>- Now you’re all set to start writing your HTML, CSS, and JavaScript.<\/li><\/ul><\/li><\/ol>\n\n\n\n
Method 2: Edit Local Files<\/h3>\n\n\n\n
- Create a new folder named “public_html” on your computer. This will be where you put all of your files for this training. Make sure you remember where you put it.
<\/li> - Open VSCode. Cmd \/ Ctrl + O and open the folder you just organized. This is just like opening up a file on your computer.<\/li>
- Ctrl \/ Cmd + N > Ctrl \/ Cmd + S to create a new file and Save. Save it as “index.html”<\/li>
- Now you can see your changes on the\u00a0local\u00a0<\/strong>url on the browser. So for example, I saved my index.html under the directory \/Users\/nhaithuy\/UT Austin\/STA\/Basic Training\/HTML-CSS-Test\/index.html, so my browser url looks like this.
<\/figure><\/li>- Every time you write new code, just refresh the page and it should work. If you don\u2019t see the changes, try hard refreshing (Cmd \/ Ctrl + Shift + R) to prevent browser caching. <\/li><\/ol>\n\n\n\n
Writing HTML<\/h2>\n\n\n\n
HTML is a markup language, meaning that it uses tags to define the elements displayed, and the tags themselves are not displayed. For example, an HTML p tag displays a paragraph. <\/p>\n\n\n\n
Most HTML tags come in pairs. To begin a tag, type
<[tag-name]><\/code>. To end a tag, type<\/[tag-name]><\/code>.<\/p>\n\n\n\nFor example, for the p tag:
<p>This is a paragraph<\/p><\/code><\/p>\n\n\n\nDon’t worry if this seems confusing, you’ll get a hang of it as you work on this training.<\/p>\n\n\n\n
To start, place this code below to your HTML file.<\/p>\n\n\n\n
<!doctype html>\n\n<html lang=\"en\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\n\n <title>HTML \/ CSS Training Test Site<\/title>\n\n<\/head>\n\n<body>\n <!-- your code will go here -->\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nIt should look like this.<\/p>\n\n\n\n
<\/figure>\n\n\n\n- In your browser, go to https:\/\/laits.utexas.edu\/~[your-eid]\/index.html (or, if you work on your local computer, Ctrl \/ Cmd + O, navigate to your public_html folder, and open up index.html) and make sure that there is a blank page (no errors). If there are any errors. please reach out to the training lead for help.<\/li>
- You will write your code between the
<body> <\/body><\/code> tags. First, try:<h1>This is a heading<\/h1><\/code><p>This is a paragraph. There should be some more text here. More text more text more text . . . <\/p><\/code><\/figure><\/li>- Refresh your browser. You should see this.
<\/figure><\/li>- Here’s a list of HTML tags for your reference https:\/\/www.w3schools.com\/tags\/default.asp<\/a>. Take a glance at it but don’t worry about knowing all of it. If you need to look up something you’d like to achieve on your site at anytime, you’re welcome to go back to the reference or simply Google what you want. Most likely, the ones you’d use the most are these listed below. Please read through their description on the HTML reference page:
<p><\/p><\/code><\/li><h1><\/h1><\/code>, or any of the numbered heading (<h2>, <h3>, <h4>, etc.<\/code>). The smaller the number, the smaller the header.<\/figure><\/li><img><\/code>. Notice that this one doesn’t have a closing tag<\/li><a><\/a><\/code><\/li><div><\/div><\/code><\/li><b><\/b><\/code> and<i><\/i><\/code><\/li><\/ul><\/li><\/ol>\n\n\n\nSimple Headings and Paragraphs<\/h3>\n\n\n\n
Start creating a few headings and paragraphs under each heading. Please have a minimum of 3 headings and 3 paragraphs. It should follow the format: heading – paragraph – heading – paragraph – and so on. For example:<\/p>\n\n\n\n
a<h1>Life of the Virtuoso<\/h1>\n <p>Franz, or Ferencz Liszt, was a Hungarian composer, \nvirtuoso pianist, conductor, teacher, arranger, and \norganist of the Romantic era. He was a prolific composer and \nwas one of the most prominent representatives of the New \nGerman School. Among Liszt's musical contributions were \nsymphonic poems, thematic transformation, and harmony \ninnovations.<\/p>\n\n <h1>The Pianist<\/h1>\n <p>Liszt was, no doubt, one of the greatest piano virtuoso \never lived. Carl Czerny, Liszt's teacher, claimed that Liszt \nwas a natural who played according to feeling, and reviews \nof his concerts especially praise the brilliance, strength, \nand precision. His ability to keep absolute tempo was also \nmentioned.<\/p>\n\n <h2>Liszt's quote<\/h2>\n <p>Mournful and yet grand is the destiny of the artist.<\/p><\/code><\/pre>\n\n\n\nRenders:<\/p>\n\n\n\n
<\/figure>\n\n\n\n- Have at least 3 bolded text and 3 italicized text. To do this, simply wrap the text you want bold or italicized in either
<b><\/b><\/code> or<i><\/i><\/code> tags, respectively. For example:<p><b>Mournful<\/b> and yet <b>grand<\/b> is the <i>destiny<i> of the artist.<\/p><\/code>
becomes:<\/figure><\/li>- You can also nest HTML tags. For example, if you want text to be both bolded and italicized:
<p><i><b>Mournful<\/b> and yet <b>grand<\/b> is the destiny of the artist.<\/i><\/p><\/code>
becomes:<\/figure><\/li><\/ol>\n\n\n\nThe Div Tag<\/h3>\n\n\n\n
The
<div><\/div><\/code> is a very common and powerful element in HTML. It is essentially a boxed container for your content. It allows you to group elements and apply desired stylings for them. <\/p>\n\n\n\nIn this section, let’s practice creating a paragraph with a div. You’ll see that it looks just like the
<p><\/p><\/code> tag, but we’ll be applying styles to it later in the CSS section.<\/p>\n\n\n\nAdd a paragraph with the text of your choice anywhere on the page. For example:<\/p>\n\n\n\n
<div>Liszt was born in the village of Doborj\u00e1n in the \nKingdom of Hungary, Austrian Empire in 1811. Liszt's father \nplayed the piano, violin, cello, and guitar, and thus Liszt \nwas taught piano at the age of seven and began composing at \neight. After his concert debut at the age of nine, he was \nsponsored to study music in Vienna. Liszt moved to Paris \nstarting 1827, after his father's death. He gave piano \nlessons and composition lessons to earn money, often from \nearly morning until late at night. He took up smoking and \ndrinking, habits he would continue throughout his life.\n<\/div><\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nIt renders out to:<\/p>\n\n\n\n
<\/figure>\n\n\n\nSection Checklist: Did you . . .<\/span><\/h3>\n\n\n\n
- Add at least 3 Headings and Paragraphs?<\/span><\/li>
- Add at least 3 Bolded text?<\/span><\/li>
- Add at least 3 Italicized text?<\/span><\/li>
- Add at least 1 paragraph using a Div element?<\/span><\/li><\/ul>\n\n\n\n
Write CSS<\/h2>\n\n\n\n
Create and Link the Stylesheet file<\/h3>\n\n\n\n
- Ctrl \/ Cmd + N to create a new file. Ctrl \/ Cmd + S and save it as “styles.css” within the public_html folder.<\/li>
- In your index.html, between the
<head><\/head><\/code> tags, place this code<link rel=\"stylesheet\" href=\".\/styles.css\"><\/code><\/figure>This reads “link the stylesheet in the same folder (.\/ means same folder) which has the name of styles.css.”<\/li>- Now let’s test that your CSS file was linked correctly. In that file “styles.css,” paste in this code (this will only be for testing, we’ll remove it later)
p {<\/code>
color: red;<\/code>}<\/code><\/li>- Save the file, and Refresh your browser. To prevent the browser from caching the old file, perform a hard refresh with Ctrl \/ Cmd + Shift + R.<\/li>
- Check that all of your
<p><\/p><\/code> elements are red.<\/figure>
If it doesn’t change:- Check that your linking path is correct<\/li>
- Check that “styles.css” is in the same folder as your “index.html”<\/li><\/ul><\/li>
- Now you can delete that code (if you wish) and apply your own stylings.<\/li><\/ol>\n\n\n\n
CSS Selectors<\/h3>\n\n\n\n
In the above section, we “selected” all the
<p><\/p><\/code> elements on the page and gave it stylings. In this section, we’ll learn about different ways to “select” an HTML element and give it proper stylings.<\/p>\n\n\n\nCSS Element Selector<\/h4>\n\n\n\n
The way we were doing it before, typing:
p {<\/code>color: red;<\/code>}<\/code>
is called Element selector, in which we select all<p><\/p><\/code> elements and apply stylings. Let’s practice using the CSS Selector.<\/p>\n\n\n\n- Try changing color of all of your headers. For example:
h2 {<\/code>color: #a62639;<\/code>}<\/code>
changes the color of all the h2 headers into that HEX code, a crimson color.<\/figure><\/li>- Now try changing the font size of all your
<p><\/p><\/code> elements. In “styles.css,” try:p {<\/code>font-size: 18px;<\/code>} <\/code><\/figure><\/li>- Notice how the text in the
<div><\/div><\/code> elements are not affected. Guess what happen if you use the CSS element selector to select the<div><\/div><\/code> tags?<\/li><\/ol>\n\n\n\nCSS ID Selector<\/h4>\n\n\n\n
What if you want to apply stylings to a specific div <\/strong>element and not any div visible on the page? <\/p>\n\n\n\n
CSS ID Selector allows you to give your generic element a specific ID, so that every time you refer to that ID it is scoped to that element only. The HTML syntax for giving an element an ID is:
<element id=\"[element-id]\">Some stuff<\/element><\/code>
So, for example, if you want to give a div an ID of “my-div,” you’d write:<div id=\"my-div\">My text here<\/div><\/code>
This applies to any element, and not just div. You can easily give an id to a header as well.<h2 id=\"my-header\">Title<\/h2><\/code><\/p>\n\n\n\nNow, in your CSS file, select that ID following this syntax:
#[element-id] {<\/code>\/* some stylings here *\/<\/code>}<\/code><\/p>\n\n\n\nSo for example, to apply stylings to the div and header above:
#my-div {<\/code>background-color: lightblue;<\/code>}<\/code>#my-header {<\/code>font-style: italic;<\/code>
}<\/p>\n\n\n\nThis HTML and CSS here:<\/p>\n\n\n\n
\n\n<h2 id=\"quote-header\">Liszt's quote<\/h2>\n <p><i><b>Mournful<\/b> and yet \n<b>grand<\/b> is the destiny of the \nartist.<\/i><p>\n\n <div id=\"childhood\">Liszt was born \nin the village of Doborján in \nthe Kingdom of Hungary, Austrian \nEmpire in 1811. Liszt's father played \nthe piano, violin, cello, and guitar, \nand thus Liszt was taught piano at \nthe age of seven and began composing \nat eight. After his concert debut at \nthe age of nine, he was sponsored to \nstudy music in Vienna. Liszt moved to \nParis starting 1827, after his \nfather's death. He gave piano lessons \nand composition lessons to earn \nmoney, often from early morning until \nlate at night. He took up smoking and \ndrinking, habits he would continue \nthroughout his life.<\/div><\/code><\/pre>\n<\/div>\n\n\n\n\n#quote-header {\n text-\ndecoration: underline;\n font-style: \nitalic;\n}\n\n#childhood {\n background-\ncolor: #a62639;\n color: \nwhite;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nGives this result:<\/p>\n\n\n\n
<\/figure>\n\n\n\nCSS Class Selector<\/h4>\n\n\n\n
Similarly, what if you want to give the same stylings to a specific group <\/strong>of elements? The CSS class selector allows you to do that. The HTML syntax for giving an element a class is:
<element class=\"[element-class]\">Some stuff<\/element><\/code>
For example, to give a class name to a div:<div class=\"my-div\">Some text<\/div><\/code><div class=\"my-div\">Another text<\/div><\/code>
Or to an anchor tag:<a class=\"my-anchor\" href=\"my-url\">Hyperlinked Text<\/a><\/code><\/p>\n\n\n\nIn your CSS file, select the class you want following this syntax:
.[element-class] {<\/code>\/* some stylings here *\/<\/code>}<\/code>
For example:.my-div {<\/code>border: 2px solid red;<\/code>padding: 10px;<\/code>margin: 10px;<\/code>
}<\/p>\n\n\n\nThis HTML and CSS:<\/p>\n\n\n\n
\n\n<h2>Life of the Virtuoso<\/h2>\n <p class=\"bordered-\nparagraph\">Franz, or Ferencz Liszt, \nwas a Hungarian composer, virtuoso \npianist, conductor, teacher, \narranger, and organist of the \nRomantic era. He was a prolific \ncomposer and was one of the most \nprominent representatives of the New \nGerman School. Among Liszt's musical \ncontributions were symphonic poems, \nthematic transformation, and harmony \ninnovations.<\/p>\n\n <h2>The Pianist<\/h2>\n <p class=\"bordered-paragraph\">Liszt \nwas, no doubt, one of the greatest \npiano virtuoso ever lived. Carl \nCzerny, Liszt's teacher, claimed that \nLiszt was a ntural who played \naccording to feeling, and reviews of \nhis concerts especially praise the \nbrilliance, strength, and precision. \nHis ability to keep absolute tempo \nwas also mentioned.<\/p><\/code><\/pre>\n<\/div>\n\n\n\n\n.bordered-paragraph {\n border: 2px solid #a62639;\n padding: 10px;\n margin: 10px;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nGives this result:<\/p>\n\n\n\n
<\/figure>\n\n\n\nNow practice using all 3 types of CSS Selectors on your site.<\/p>\n\n\n\n
Section Checklist: Did you . . .<\/span><\/h3>\n\n\n\n
- Use the CSS Element Selector?<\/span><\/li>
- Use the CSS ID Selector?<\/span><\/li>
- Use the CSS Class Selector?<\/span><\/li><\/ul>\n\n\n\n
Housekeeping Practices and Miscellaneous Information<\/h2>\n\n\n\n
When writing HTML \/ CSS or any code, it is good practice to comment your code as you go. This will not only help with your logic and organization, but also for the person reading \/ modifying it.<\/p>\n\n\n\n
The syntax for writing comments in HTML is:
<!-- your comment here --><\/code>
For example:<!-- start of my hyperlinks --><\/code><a href=\"url-1\" target=\"blank\">Link 1<\/a><\/code><a href=\"url-2\" target=\"blank\">Link 2<\/a><\/code><a href=\"url-3\" target=\"blank\">Link 3<\/a><\/code><!-- end of my hyperlinks --><\/code><\/p>\n\n\n\nThe syntax for writing comments in CSS is:
\/* your comment here *\/<\/code>
For example:\/* styles for my footer *\/<\/code>.branding {<\/code>width: 200px;<\/code>margin: 30px; \/* gives it some white space *\/<\/code>}<\/code>\/* end styles for my footer *\/<\/code><\/p>\n\n\n\nThe syntax for writing comments in JS is:
\/\/ your comment here<\/code>
For example:\/\/ start code for the accordion<\/code>function myAccordion() {<\/code>document.getElementById(\"accordion\");<\/code>\/\/ do more stuff<\/code>};<\/code><\/p>\n\n\n\nIn VSCode, the shorthand for comment is Ctrl \/ Cmd + \/ <\/p>\n\n\n\n
In addition, the Browser Inspect tool will be very helpful in helping you design your site. When you run into any trouble (i.e. something not showing up correctly), this should be the first place to refer to. Please read through Part 1 of this training here http:\/\/sites.la.utexas.edu\/kb\/2020\/07\/29\/how-to-create-a-clio-course-module-part-2\/<\/a> to familiarize yourself with this tool.<\/p>\n\n\n\n
Template Prep<\/h2>\n\n\n\n
- Use the CSS ID Selector?<\/span><\/li>
- Now try changing the font size of all your
- Try changing color of all of your headers. For example:
- Now let’s test that your CSS file was linked correctly. In that file “styles.css,” paste in this code (this will only be for testing, we’ll remove it later)
- Add at least 3 Bolded text?<\/span><\/li>
- You can also nest HTML tags. For example, if you want text to be both bolded and italicized:
- Refresh your browser. You should see this.
- A dropdown will appear at the top of the VSCode window. Choose “Open Configuration File.”
- In the search bar, type “ssh” and click on the Remote – SSH extension.
![\"\"](\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/10\/Screen-Shot-2020-10-20-at-11.58.52-AM-1024x542.png\")
<\/figure>\n\n\n\n