This week I began to learn more about the front-end languages that serve as the part of websites and DH projects that users see. I was particularly excited because the HTML and CSS tutorials from HTML Dog were both foreign and familiar to me, as I have some experience with “drag-and-drop” web design through sites like SquareSpace and am familiar with coding conventions and programming as a process, but have no prior experience with HTML or CSS. While I intend to go back and complete the higher-level tutorials to expand my personal skill-set, I started by completing the Beginner HTML and CSS tutorials.
HTML Beginner Tutorial:
The first few pages of the HTML tutorial mostly covered what we had briefly gone over in class. However, the items toward the end started to get very interesting. I particularly enjoyed learning about and playing with forms, as they are interlinked with back-end processes and are also simply fun to play with as a user. Learning about forms made me want to learn about writing the php programs that process those forms. When messing around with forms, I made a survey about Michael Dapaah, a British comedian whose freestyle as his persona “Roadman “Big” Shaq” went viral, resulting in the production of a full song and music video that currently has 169 million views on Youtube. While “Roadman Shaq” and his meteoric rise to internet stardom are somewhat ridiculous, the clear power of forms can’t be overstated.
The Code Behind the Form
<p> Who is Big Shaq?</p>
<p><input type="radio" name="whois" value="A Comedian" checked>A Comedian</p>
<p><input type="radio" name="whois" value="A Rapper">A Rapper</p>
<p><input type="radio" name="whois" value="A Meme">A Meme</p>
<p><input type="radio" name="whois" value="Some British Guy">Some British Guy</p>
<p><input type="radio" name="whois" value="All of the Above">All of the Above</p>
<p>What did DJ Khaled Say About Big Shaq?</p>
<select>
<option selected value="Mans not hot">Mans not hot</option>
<option value="Quick mafs">Quick mafs</option>
<option>They don't want us to win so we win more</option>
<option value="Happy trails to you">Happy trails to you</option>
</select>
<p><input type="submit" value="SUBMIT YOUR ANSWERS"></p>
CSS Beginner Tutorial
The CSS beginner tutorial similarly started out as a refresher of what we briefly went over in class, but I was probably more surprised than I should have been at the level of control over every detail that CSS provides to the builder. I did struggle with one thing in particular, and that was outlining what the strong function does. When defining the strong function in my CSS file, I was unable to get any result when tagging text as strong in my HTML file. For instance, even if I copied this code from the tutorial,
strong {
font-style: italic;
text-transform: uppercase;
}
text tagged as strong would not change at all. I’m still not sure what I am doing wrong, but look forward to discovering the root of my error. I’m excited to continue expanding my knowledge of HTML and CSS, and adding Javascript to my digital toolbox.
I was also interested in learning about forms. I think it is pretty useful and, as you mentioned, fun to play with. It is interesting that you encountered such problem with the selector strong, because I did copy the same code and ended up with italic and uppercase writing on my page. I look forward to discussing about this issue in class as well.
The forms seemed really powerful in terms of usability. I couldn’t figure out how to extract the data filled in by the user though because HTML doesn’t have any way to store variables. If you find a way to do that, let me know!
Because HTML is only a markup language you will need the help of another language if you wish to store variables. Forms in HMTL have an attribute called “action” which may answer your question. Here is an example of one:
“”
What this does is is send the information you entered in your form to a PHP file, which then can store, and even display the submitted information. Hope this helps!
Sorry for the lack of example. The attribute would be something like this:
<form action="/action_page.php"
Thanks for the specification! This does actually clear some stuff up