DEV Community: Isinkaye Praise

Understanding the DOM: A short guide to web pages structure

Isinkaye Praise — Sun, 05 May 2024 22:26:54 +0000

DOM, which stands for Document Object Model is a representation of a document (HTML) in a hierarchical form. It portrays a document using a tree-like model. Each element is viewed as an object and is related to other elements as parent or child. When writing HTML codes, there are elements that are placed under/within other elements. For example, an input element could be placed within a div tag. The Div tag acts as the parent while the input tag is the child. It should be noted that a parent element can have more than one child element in it.
The illustration of the hierarchy level which DOM gives also makes it easy to manipulate the information and styles in an HTML document using a programming language like JavaScript or Python. The DOM gives accessibility to the element as an object, the properties, methods and events of the element.
The document and its components are represented as nodes with the document itself as the parent nodes and the components as child nodes. These components could be elements, attributes or text contents.
As mentioned earlier, JavaScript, which is a scripting language, can be used to manipulate DOM. It has defined methods that can select any element using the tag name, class name or the id name. Using an example, I will be explaining how to select HTML elements.
Const elementName = document.getElementById(“idName”). This line uses an ID name to select.
Const elementName = document.getElementsByClassName(“className”) . Using classnames

Note that the code for ID has element while that for ClassName has elements. This is because an ID name can only refer to one element while ClassName can be used for a bunch for element with similar style. There are also other ways to find elements such as: getElementByTagName, querySelectorAll and others.
Using a step-by-step guide, I will be demonstrating how to add a “p” element to an existing Div tag with a class name of “div”.

First step is to select the existing div element. const bigDiv = document.getElementsByClassName("div")
Next step is to create a p element const paragraph = document.createElement("p")
Then, create a text which will be in the paragraph const newText = document.createTextNode("This is a paragraph.")
Append the formed text to the paragraph paragraph.appendChild(newText)
Append the paragraph to the existing div bigDiv.appendChild(paragraph)

I hope this short article is able to break down what DOM means and how it can be used. For more information, you can check out “W3Schools” or “MDNDocs”.

Choosing a CSS selector

Isinkaye Praise — Thu, 18 Apr 2024 12:35:30 +0000

UNDERSTANDING CSS
CSS, which stands for Cascading StyleSheet is the coding language which is used to give a website the layout and styles. Basically, it is used to design a website and make it aesthetically pleasing for users. It is used alongside HTML.
It can be added to the HTML file by three methods.

Inline - This method adds the style in the same line as the element.
Internal - Style is added by adding a style element in the head section of the HTML file.
External - An external CSS file has all the styles that will be used. The CSS file is added to the HTML document by using a link element in the head section.

CSS CASCADE
Cascade refers to the mechanism that determines what CSS rule set is followed when styling a file, page or site.
When styling an HTML document, the parts/sections to be styled is chosen by using a “Selector”. A selector can either be the element tag, a class name or an id name. However, there is a level of hierarchy among the selectors.
An element wrapped in another element is referred to as the child while the wrapper is known as parent. The child/children generally inherit whatever style the parent has but sometimes, one might want a different style for a particular child.
Cascade mainly comes into play when two different styles are being applied to a specific element.
As mentioned earlier, the selectors have varying level of specificity. The element tag selector(h1 tag,p tag,a tag) is not so specific since we can have multiple tags in the HTML document. The class selector uses the class name given to some specific elements. It has a higher level of specificity than the element tag selector. On the other hand, the id selector used the id name given to an element. Note that an id can only be given to one element. It is more precise than the class selector hence, it has a higher level of specificity.
Sometimes, there might be a need to be more particular when picking an element. In such situations, one can combine two of the selectors discussed above.
It should also be noted that the method used to add CSS gives a level of specificity to the style. When styling the same element, the inline style will override the internal style which will also override the external file of style.
All these should be noted while styling to avoid errors and to achieve the desired design.

There are more tricks that can be applied to make selection easier. For more information, you can check out MDN web docs - https://developer.mozilla.org/en-US/docs/Learn/CSS

BRIEF HISTORY OF THE INTERNET

Isinkaye Praise — Thu, 04 Apr 2024 21:25:33 +0000

BRIEF HISTORY OF THE INTERNET
The origin of the internet was in the 1950’s and 60’s. It was built as a bridge for communication between computers. The computers used back then were mainframe computers, which were too big, heavy and expensive to be carried around. In order for computers to communicate, there had to be a way to transfer data from one computer to another.
One of the earlier solutions used to bridge this gap is Circuit Switching. However, it was a really long process and could be easily interrupted. Because all the data were transferred in a packet, any interruption would terminate the transfer of all the data. To overcome the problem associated with circuit switching, another method called Packet Switching was devised. In packet switching, the data is broken down into smaller parts and these parts can be sent independently. Packet Switching took lesser time and the interruption was limited.
ARPANET was introduced in 1969 as a significant computer network to utilize packet switching. It is seen as the predecessor of the internet. The first communication by computers was recorded in 1969 in University of California, Los Angeles (UCLA) and Stanford Research Institute (SRI). After ARPANET, other networks were introduced such as CYCLADES, Merit Network, UUCP AND Usenet. Despite having quite a number of networks, these networks could not connect. In order to connect the different networks, Transmission Control Protocol and Internet Protocol (TCP/IP) was developed.
Internet is a short form of Internetworking and is described by Wikipedia ad a collection of data linked with a common protocol. Originally, internet was used by the government and government bodies. It was until the 1980’s that companies for Internet service provider (ISP) were formed.

Domain Name System (DNS), Network Packet, File Transfer Protocol, HTTP, HTTPS
Domain Name System (DNS) is simply a system through which web searches connect with the information needed. All devices have their unique IP address which makes them identifiable. Users enter a search by using domain names while computers/browsers only recognize IP addresses. DNS is used to convert the domain names to IP addresses.
Network packet refers to the smaller chunks of data that is transferred from one computer to another. It enables more than two computers to interconnect and transfer data. It also hasten up the process of data transfer. Most packets have the TCP/IP headers.
File Transfer Protocol is the standard network protocol used to transfer files from a host (can be called server) to another (can also be called client) over a network such as Internet. In simple terms, it is a way to download or upload files between the internet and computer systems. It is provided by TCP/IP.
HTTP stands for Hypertext Transfer Protocol. It is an application protocol which allows users to communicate in the World Wide Web. It enables interaction by transmitting hypertext messages between client and server. It exchanges data as plaintext which makes data accessible to anyone.
HTTPS stands for Hypertext Transfer Protocol Secure. It is basically a secured version of HTTP. Rather than sending data in plaintext, it encrypts it and make it inaccessible to third parties. It uses both HTTP requests and responses with SSL and TLS technology.