This week’s learning about HTML/CSS is very interesting! Though I have to go back and watch some videos again to make sure that my text input is correct, in all the experience is very fresh and fun!
https://www.khanacademy.org/computer-programming/spin-off-of-project-travel-webpage/5798175655542784
My questions:
HTML is the carrier of web content. Content is the information that webpage creators put on the page for users. It includes text, pictures, videos, etc. CSS is more like performance and decoration. For example, the title font, color changes, or adding background images, colors, etc. These are things used to change the appearance of the content. JavaScript is used to achieve interaction on web pages, such as mouse over the pop-up drop-down menu, or click the button.
Tips (for memorize)
HTML doesn’t need to differentiate the cases, <h1> and <H1> are the same, but most of them are in lowercase.
HTML file has its own fixed structure.
<html>
<head>…</head>
<body>…</body>
</html>
The <head> tag is used to define the head of the document. The elements include tags such as <title>, <script>, <style>, <link>, <meta>, etc. Between the <body> and </body> tags, the content is the main content of the webpage, such as <h1>, <p>, <a>, <img> and other web content tags
Create the five elements of the table:
table, tbody, tr, th, td
<table>…</table>: The entire table starts with a <table> tag and ends with a </table> tag.
<img> tag, insert a picture for the web page
<img src=“”>
alt: Specify the descriptive text of the image. When the image is not visible (the download is unsuccessful), you can see the text specified by the words.
Many semantic tags have been added to HTML, such as header, footer, body, article, address, etc. When you see it, you probably know which parts are used to describe them. The semantic label of HTML (in simple terms) is to make the label have meaning as if it directly tells you what organ and part it is, instead of using other labels to piece it together. It looks like a human body with systematic layers.
Putting a semantic tag on a piece of content can make the page have a good structure, it is also easier to understand what the content is, and it is helpful for search it. I think that in future program design, there will be more and more semantic tags, and more and more people can master programming through simple learning.
I remember my first true experience with HTML code was “back in the day” when Tumblr had a big presence in teenage girls’ lives. Of course the theme of your blog played a crucial role in the “vibe” you were going for and the experience that you were trying to create for your visitors. Years later, and multiple websites later, it was really interesting and fun going back to where it all started, the initial steps of HTML. Working out everything from the beginning and practicing on code-generated exercises and quizzes (Khan Academy, in-Learning, etc.) allows you to understand how and why a specific command of line of code transcribes and translates to a specific thing/action/button/title/etc. on a “live” website.
So in honor of my first HTML hands-on-experience, I was curious to see what the current is the current approach that Tumblr is taking in terms of to designing your own Tumblr theme or even “messing with” a pre-designed one cataloged on the platform. Back then, touching up or altering themes on Tumblr wasn’t necessarily something that people did. However, other users on Tumblr or other online platforms and chat boards had suggestions, instructions and steps on how to change the code, add extra features, change certain characteristics or add cool ideas that your chosen theme did not previously have, allowing for a more “unique” and “interesting” appearance of your Tumblr.
Interestingly enough, Tumblr now has a whole page on how to create your own custom made HTML theme.
This reminded me exactly like the Khan Academy video lessons and practical exercises that broke down the very initial and basic yet super crucial commands that need to be inserted into the browser in order for it to execute the code and translate the “computer-human-language” combo into a specific characteristic/feature i.e. title, images, etc.
Below I’ve attached a screenshot of a much more recent Tumblr blog of mine that I had to create as part of a research for a communications class that I combined with my thesis research in undergrad. I didn’t really delve into the more specific details and features of the theme that I used so I never really needed to open up the HTML code and the first glance that you take at it it looks completely unrecognisable. However, as you focus more on breaking down and actually understanding the code you can “see” how it will translate on the actual website without actually needing to “see” it on the website. Still, since it is not a code you have written or at this point haven’t even altered, it does seem like something “foreign”.
These concepts and questions around “assimilation” or sense of ownership or even attachment to code are interesting to look into. I wonder how this might also have an underlying connection with different legal matters around the issue of code, or tech-language ownership and authentications?
HTML and CSS are two of the cornerstones of coding methods for building webpages. HTML allows the structure of the webpage to be built and is the core skeleton of any webpage (needed for any kind of webpage), while CSS always an added layer of layout and visual effects. JavaScript is the next level on top of CSS that makes the webpage interactive and controls the behavior of the webpage elements (Cox). These programming languages are how we communicate with software and to direct it to compile what we want as an outcome.
An interesting tool on Google Chrome is the “inspect” feature, which allows you to look at the underlying code of any webpage. For example:
It’s interesting to look through this feature because it helps explain a lot about how elements are put together and the complexity and occasional (surprising) simplicity required to build webpages. It’s also helpful when learning the various rules and appropriate etiquette to coding format.
In addition, an extremely interesting field of code (especially when learning about how elements are built from lines of code, and how JavaScript and CSS is layered on top of HTML) is “code as art”. A coder, Diana Smith, made the following image entirely out of code (on the right is the ‘inspected’ review of the code used (Smith).
Below, I’ve shared some of my own HTML/CSS work – a silly shark game website.
References
Cox, Lindsay Kolowich. “HubSpot”. Nov 7th, 2018. https://blog.hubspot.com/marketing/web-design-html-css-javascript
Smith, Diana. “Pure CSS Oil Painting – by Diana Smith Aka CyanHarlow.” Diana Smith, diana-adrianne.com/purecss-francine/.
W3Schools.com, “Try Out HTML Code”
Click here to see the live URL!
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Sacha Qasim Week 9: HTML </title>
<!– import the webpage’s stylesheet –>
<link rel=”stylesheet” href=”/style.css”>
<!– import the webpage’s javascript file –>
<script src=”/script.js” defer></script>
</head>
<body>
<h1>Intro to HTML</h1>
<p>
For this week’s assignment, I will use HTML code to respond to the weekly assignment.
<br> HTML stands for HyperText Markup Language.
<br> HTML is a tool that web browsers respond to in applying and displaying language text, images, videos, links, and so much more!
</p>
<h3>
Understanding How HTML Works
</h3>
<p>
HTML is the foundation of language display on a computer. Syntax is one of the main variables that guides not just HTML but other programming languages. The syntax matters since these are rules by the systems and if not applied correctly, can lead to SYNTAX ERRORS
<br> For HTML to work, the developer needs to be familiar with TAGS. Tags are a special syntax in defining the element within the program. Tags will always start with a < or a >; this helps HTML indicate what type of element is going to be implemented.
<br> Tags that are generally used open are followed with a , h1, h2, h3, h4, h5, p, div, span, a, and much more. To end a tag and indicate to the program to run, apply <./ .I had to add a period between the “less than” sign since it wanted to run as a tag, otherwise you do not the period between the two symbols for it to run.
<h3> Questions </h3>
Why do only some links work when you apply them and try to hyperlink them using the <.a.> tag <./.a.>?
</p>
<h4>
Side note:
</h4>
<p>
To have made this pretty with colors, fonts, and sizing, I would have needed to use CSS- perhaps for another class.
</p>
</body>
</html>
