#table elements html | Explore Tumblr Posts and Blogs

ceyhanmedya · 1 year

Text

HTML

New Post has been published on https://hazirbilgi.com/what-is-html-when-and-by-whom-was-html-created/

HTML

What is HTML? When and by whom was HTML created?

HTML is a markup language that defines the structure of web pages. HTML is one of the basic building blocks of every website . For this reason, it is among the first details that web developers will want to learn.

While HTML is an important building block, it is not enough to make a web page look good. It must be supported by CSS and JavaScript . HTML is essentially code and is used to structure the content of a web page.

The content on the web page can consist of a number of different paragraphs, images and tables. It is possible to format them with HTML. In this way, the web browser knows how to configure the web page that a person visits and displays it in the direction desired by the developer.

What is HTML and when was it invented?

HTML or hypertext markup language is a markup language developed for displaying materials or data on the internet. Each material has a known buyer location, called a web page . Web pages contain hypertext links that allow the fetching of related pages.

HTML is the markup language used to code web pages. HTML was designed by British scientist Sir Tim Berners-Lee in 1980 . HTML markup tags contain document elements such as headings, paragraphs, and tables. Once formatted, they can be viewed by programs or applications known as web browsers.

When viewing a web page, web browsers interpret it according to permitted technology. Thus, items such as headings, paragraphs, and tables are presented adapted to the screen size and font used. HTML documents also contain anchor links, called links to other web pages.

What is Semantic HTML?

Semantic HTML is the conveying of literal meanings for the uses of HTML tags. Semantic HTML was used effectively throughout most of the 90’s and became an important part of the standard HTML structure . Since the late 90’s, CSS has become more important in web pages when it has been used effectively .

Semantic HTML

It consists of tags such as , ,,, and . One of the most important reasons to use semantic HTML tags is that web crawlers can easily index the web page. In this direction, it is possible to improve the web page in terms of SEO . Also, semantic HTML is important for accessing web pages from screen readers.

What are HTML Versions?

After HTML was designed, it has developed in many different forms over the years. For this reason, the HTML versions that are used effectively have changed from time to time. There are five different versions of HTML that are used effectively. Each of them made extra contributions to the HTML structure, making it easier for the developers to use it.

HTML 1.0: It is the first version developed for HTML. It was published in 1991 and was used effectively until 1995.

HTML 2.0: Version released in 1995. It has been accepted as the standard version in web design. Added support for features such as text boxes and buttons.

HTML 3.2: Published by the W3C in 1997. It provided extra support in terms of table creation and form elements. It is considered the official standard since 1997.

HTML 4.01: Released in 1999. It is the stable language for the HTML language and is considered the official standard. It has added CSS support to the HTML language.

HTML5: It is the newest version of the HTML language and was announced in 2008. This version is developed by W3C and WHATWG .

What’s the Difference Between HTML Tags, Elements, and Attributes?

HTML tags , HTML elements, and HTML attributes are often confused and used interchangeably when defining. However, there are differences between these three elements. Each HTML tag has its own unique meaning. HTML elements are used to describe content. HTML attributes provide additional information for existing HTML elements.

What are HTML Tags?

HTML defines the formatting of a particular web page. For this reason, the text, images and other content on the page should be displayed in a shaped way. For example, you may want some text to be uppercase, lowercase, bold, or italic. To do this, you need to use HTML tags .

HTML tags are like keywords that define how the web browser will display the content. When a web browser reads a document containing HTML, it reads it from top to bottom and from left to right. Thanks to HTML tags, a web browser can distinguish between HTML content and simple content. Each HTML tag can have different properties.

What are HTML Elements?

HTML consists of three elements , opening tag, content and closing tag . Some elements are used as empty. HTML elements are often confused with HTML tags. However, an element consists of a combination of three different elements. All HTML files are made up of elements. These elements are responsible for creating web pages. They also describe the content on the web page.

Theoretically, the opening tag, content, and closing tag should go together. Some elements may not have content and closing tags. Such elements are called empty elements or self- closing elements . For example, a line spacer and a straight long line.

elements in this structure.

What are HTML Attributes?

HTML attributes are placed in the opening tag, and they range from the “style” to the “id” description. HTML attributes help convey more information about an element. In addition, these attributes ensure that needs such as styling elements on the web page with JavaScript are met.

While HTML attributes provide additional information about elements, they are modifiers of the HTML element. Each element defines the behavior of the element to which it is attached. HTML attributes must always be applied with the start tag. Although the names to be given to HTML attributes are case sensitive, standard usage consists of lowercase letters.

html,are html tags case sensitive,are html and css programming languages,are html and css the same,are html files safe,are html attachments safe,are html and javascript the same,are html tables still used,are html ids case sensitive,are html sites reliable,are html attributes case sensitive,create an html file,create an html page,can html files be dangerous,create an html table,create an html form,can html id have spaces,create an html element in javascript,create an html link,convert an html to pdf,

0 notes

izicodes · 5 months

Text

Sugary Scribbles | #8

Saturday 6th January 2024

IT'S BASICALLY WORKING (on larger screens)! My never-ending war on website responsiveness continues! I have a large screen and I stupidly only took into account of MY screen size. What I did do though is created a message for phone-table sizes because it just wouldn't make sense it working on really small devices - in my opinion~! But for now I will put this on hold because I am excited about my other project idea I came up with yesterday oops~!

This is my first project of the year and it's super adorable in my opinion! It paints, it erases, it deletes and it saves your artwork! Ticks all the boxes I made at the beginning of the project! Turned a simple 'Make a HTML painting webpage' into something more cuter and cool! Job well done! 😩🙌🏾💗

You can try it out (if you have a larger screen size), all that happens is the painting will be off the mouse direction a bit, sorry!

link to the Sugary-Scribbles web app! 🍡

Lastly, here is a cool drawing I made as I was testing the site~! I'm a better artist than this I swear, just not good using a mouse...

List of resources I used during the project

Figma - to plan the webpage

Canva: to make the header

Photopea: for further photo editing

RedKetchup: to colour pick quickly

CSS Animations: to add the zoom-in-n-out animation

MDN Canvas: to know what the element does properly

YouTube Tutorial: to get inspiration and extra help

Flaticon: for the icons and cursors

Html2canvas API: to turn the drawing into an image (tutorial)

That's all, have a nice day/night and happy coding! 🖤

#xc: project logs #sugary scribbles project #codeblr #coding #programming #progblr #studying #studyblr #dev logs #comp sci #computer science #programmer #devlogs #html css #javascript #tech #cute #adorable

86 notes · View notes

zarvasace · 5 months

Text

Things I've learned about AO3 styling recently

It's rather difficult to work around the existing default styling of things like <p> and <h#>s. Better to use <div>s to circumvent that entirely.

If you use <p> and <div> elements in the same block, the <div> will inherit the <p> because AO3 puts freakin <p>s on EVERYTHING

^^ you don't need to add extra padding or margin on stuff a lot because of the existing margins on <p>s which, as we have noted, go on everything thanks to AO3's parser. Just keep it in mind.

ID css selectors don't work. Use classes instead.

AO3 doesn't really style lists or tables, so you can use those selectors without working around anything

Selectors like :nth-child still work though!!

Just keep your nesting organized and save your work somewhere where the tab stops and formatting makes sense, because AO3's html editor likes to move stuff around and it's hard to find after the fact. Keep a copy for editing.

#ao3 #html css #i speak from the coffin

40 notes · View notes

apod · 1 year

Photo

2023 January 8

Where Your Elements Came From Image Credit & License: Wikipedia: Cmglee; Data: Jennifer Johnson (OSU)

Explanation: The hydrogen in your body, present in every molecule of water, came from the Big Bang. There are no other appreciable sources of hydrogen in the universe. The carbon in your body was made by nuclear fusion in the interior of stars, as was the oxygen. Much of the iron in your body was made during supernovas of stars that occurred long ago and far away. The gold in your jewelry was likely made from neutron stars during collisions that may have been visible as short-duration gamma-ray bursts or gravitational wave events. Elements like phosphorus and copper are present in our bodies in only small amounts but are essential to the functioning of all known life. The featured periodic table is color coded to indicate humanity's best guess as to the nuclear origin of all known elements. The sites of nuclear creation of some elements, such as copper, are not really well known and are continuing topics of observational and computational research.

∞ Source: apod.nasa.gov/apod/ap230108.html

179 notes · View notes

blurban-form · 11 months

Text

Bluey’s School (Glasshouse School) (2/?)

References in this post are primarily from this link: https://academics.hamilton.edu/government/dparis/govt375/spring97/Teacher_Training/tt4.html

Waldorf Schools

Any episode that includes Bluey’s school… right away you can tell that it is an atypical school. It is: it’s a Waldorf school. The teaching style, curriculum, etc. are all distinct from standard approaches.

Here’s a deep dive on this based on some online research…

Rudolf Steiner, the founder of the first Waldorf school in Germany in 1919, believed that all children should be given "individualized" attention (rather than just those with special needs.)

This style of education emphasizes a focus on the 'individual' rather than the 'group', with each child being valued for their individual accomplishments: every child is deserving of the same attention typically given to gifted and learning-disabled students in conventional educational streams.

Classes within these schools are structured in a unique system of "blocks" that focus on particular areas of study for a period of three to four weeks rather than the same subjects for the whole school year or semester.

As children grow older, more concrete and technical areas of subjects are introduced. Through this method, not only are the developing child's needs met, but so are their interests. As a result, students are kept actively engaged.

Features of this style of education

Key elements of the Waldorf educational approach include:

Teachers try to fully engage the individual student at each step by gearing the curriculum to their age and needs.

Teachers focus on the child's learning processes and achievements in all areas, not just the academic. In this way, the children can be developed as complete human beings.

Waldorf classrooms don't include computers, televisions, etc. Note how in “Typewriter”, Bluey thinks she needs a typewriter for a story but her teacher takes the focus off of typing a story and onto Bluey and her friends actually having an adventure.

The Waldorf curriculum integrates arts and music into all areas of study. Daily activities include drawing, painting, singing, instrument playing…

Even the aesthetic atmosphere of the classroom is different to a standard school: The Tampa Tribune described a Waldorf school setting: "Imagine a classroom with old wooden tables, a backyard garden and children learning to knit and crochet. Where art and music is intertwined with every subject, students write their own textbooks and the toys are all handmade". Which is definitely the look/feel in Bluey’s school…

Additionally, a tenet of this style of education is that a focus on art and nature in education can lead to a greater appreciation for the beauty of life later on.

Waldorf schools encourage children to keep working on their imagination skills beyond kindergarten, using these skills to learn how to co-operate, share and interact. This concept of letting children progress into adulthood at their own level is a unique cornerstone of the Waldorf education method.

This concept of letting children progress into adulthood at their own level is a unique cornerstone of the Waldorf education method. This last piece is very key -- we seldom see anything being taught to the children; they’re free to do their own thing, make up activities, interact with one another, problem-solve, etc. and Calypso is there to gently guide them towards solutions occasionally.

So Why is This in “Bluey”?

The show “Bluey” is somewhat based on the show’s creator, Joe Brumm’s life experiences as a parent. Joe Brumm chose to have his daughter educated this way after she started the first grade. This is explained by Joe Brumm in an interview with the website The Father Hood:

"Bluey was still in embryonic form when Brumm’s eldest daughter started school. Her experience changed the course of the show.

'Play time was suddenly taken away from her, it was just yanked and seeing the difference in her was horrendous,' he says. 'There was no playing, there was no drawing, it was just straight into all this academic stuff. And the light in her eyes just died.'

Brumm researched alternatives for schooling and researched the value of play for child development. It is said that this is what led him to select Waldorf-style education for his daughter.

'Bluey is just one long extrapolation of that,' Brumm says. 'It’s to encourage people to look at play not just as kids mucking around, but as a really critical stage in their development that, I think, we overlook at their peril.'

Quotes from Joe Brumm from this link:

Closing comment & a caution

Personally, I think it’s interesting to see a different approach of educating children depicted in a TV show. It’s not “oddball”, it’s just a part of these dog-children’s lives.

I feel like the public is exposed to a lot of examples of children’s education on television and it’s generally portrayed in a negative light: e.g. The Simpsons, Bob’s Burgers… and even on shows like “Arthur” the kids were often complaining about school, or having something unpleasant/stressful take place while at school.

My only concern for Bluey and her classmates (and maybe it’s a long-term issue, nothing to worry about in the short term) is this: a potential downside to a Waldorf-style education would potentially be the sharp adjustment a student will encounter transitioning from this nurturing environment to one where that isn’t the case. It could well be unsettling.

…phew, ok, maybe one or two more posts about the school to come.

(Maybe, because of the source material, some of this post may sound a little like a giant sales pitch… it’s not meant to be. I think it’s interesting because it’s different; something else to learn about, etc.)

#Bluey deep dive #Bluey alternative educational strategies #Bluey

70 notes · View notes

dollsonmain · 7 months

Text

So That Guy demanded Son look up coding languages etc. in a non-teaching, non-leadership kind of way and Son was reading off the list to him yesterday.

Son said "CSS" and That guy goes "I don't know what that is." That Guy still thinks all websites are programed with HTML.

And I'm just like..... "Here *inspect element* that's CSS. It's similar to and uses a lot of elements of HTML. That's how most websites are built these days. "

He does not like when I know something he doesn't, so much so that he did this yesterday where he came home, asked me to unlock my phone without asking questions, set it on the table, go into Signal, and show him the settings. He still refuses to tell me what that was about, but knowing him and his particular style of paranoia, I'm guessing he wanted to make sure I had "Share contacts with IOS" set to off. He refuses to explain, though. It gives him something to know that I don't.

If you're going to give an assignment to someone, you ought to also know the information? But also, I very much dislike how he's all demanding and condescending all of the time when his own education about the subject he's trying to airquotes"teach"airquotes is sub standard.

16 notes · View notes

weepingwitch · 6 months

Text

feel like i'm the only bitch these days who gives the HTML <table> element the love and respect she deserves like everyone's moved on to divs and css grid layout and forgotten the lady who used to single handedly manage all webpage structure in the 90s

12 notes · View notes

blogpreetikatiyar · 1 year

Text

WhatsApp Clone Using HTML and CSS

What does cloning a website means?

To make a copy

Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.

Any website can be cloned. You are also free to integrate some additional new features while cloning your website.

Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.

Let’s learn how to clone a website just using HTML5 and CSS in a simple way.

Will take an example of WhatsApp Website and will clone it.

WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).

Key WhatsApp Terminology

Cross Platform

Messaging apps

End-to-end encryption

Video & Audio Calls

WhatsApp Business

HTML (Hyper Text Markup Language) –

HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications

It represents the structure of a web page

It comprises of series of elements which tells the browser how to display the content

Basic Structure of a HTML Document –

<!DOCTYPE html>

<html>

<head>

<title>WhatsApp Clone</title>

</head>

<body>

<h1>let's learn Web Development</h1>

<p>My first project - WhatsApp Cloning</p>

</body>

</html>

Let’s Explain the above code –

- It is used to defines that the document is HTML5 document

- It is the root elements on an HTML Page

- It contains all the meta information about the HTML Page

- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc.

- It defines the largest heading for any topic, it ranges from -

- It defines a paragraph in the HTML page

Elements –

It is the collection of start and end tag, and in between content is inserted between them.

It major components are–

Opening Tag – Used to tell the browser where the content starts.

Closing Tag – Used to tell the browser where the content material ends.

Content – Whatever written inside the opening and closing tag is content.

Some Most Commonly used tags are –

– Used to define a document or section, as it contains information related to titles and heading of related content.

– The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site

– Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another.

– It is used to define a paragraph. Content written inside tag always starts from a new line.

– It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.

- It is used to group multiple elements together. It helps in applying CSS.

- Image tag is used to embed an image in a web page.

CSS (Cascading Style Sheet) –

CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media.

It used for designing web pages, in order to make web pages presentable.

It is standardized across Web Browsers and is one of the core languages of the open web system/technology.

CSS Selector –

CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.

Types of CSS Selectors –

Element Selector – It selects the HTML elements directly using name

ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element.

Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements.

Universal Selector – It selects all the elements of the webpage, and apply changes to it.

Group Selector – It is used when same style is to be applied on many elements. It helps in non-duplication of code.

Different ways of applying CSS -

CSS can be applied in different ways –

Inline CSS –

Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.

<h1 style="color:blue;">Let's learn Web Development</h1>

Internal CSS –

It is defined or written within the <style> element, nested instead <head> section of HTML document.

It is mainly used when need to apply CSS on a particular page.

h1 {

color:blue;

}

</style>

External CSS –

It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.

It is written instead head tag.

For more detailed guide – Click here

Let’s implement the above learnt concepts –

In this example will clone a static page of WhatsApp using Internal CSS-

<!DOCTYPE html>

<head>

:root {

font-size: 15px;

--primaryColor: #075e54;

--secondaryColor: #aaa9a8;

--tertierColor: #25d366;

}

* {

margin: 0;

padding: 0;

font-family: inherit;

font-size: inherit;

}

body {

font-family: Helvetica;

font-weight: 300;

}

img {

object-fit: cover;

width: 100%;

}

.container {

margin: 0 1.2em;

}

header {

background-color: var(--primaryColor);

padding: 1.4em 0;

}

header .container {

display: flex;

justify-content: space-between;

align-items: center;

color: white;

}

header .logo {

font-size: 1.5rem;

font-weight: 300;

}

header .menu {

margin-left: 18px;

}

.nav-bar {

background-color: var(--primaryColor);

margin-bottom: 8px;

display: grid;

grid-template-columns: 16% 28% 28% 28%;

justify-items: space-between;

align-items: center;

text-align: center;

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,

rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}

.nav {

color: var(--secondaryColor);

text-transform: uppercase;

padding: 1em 0;

}

.nav.active {

border-bottom: 3px solid white;

color: white;

}

.chat {

padding: 1em 0;

display: flex;

justify-content: space-between;

}

.chat .info {

display: flex;

}

.chat .username {

font-size: 1.2rem;

margin-bottom: 5px;

font-weight: 300;

}

.chat .recent-chat {

color: gray;

max-width: 200px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.chat .recent-chat .read {

color: #34b7f1;

}

.chat .photo {

width: 55px;

height: 55px;

border-radius: 50%;

margin-right: 18px;

}

.chat .recent-chat-time {

font-size: 12px;

color: gray;

}

.contact-button {

padding: 1em;

border: 0;

border-radius: 50%;

color: white;

transform: rotate(0deg);

font-size: 1.3rem;

position: fixed;

bottom: 20px;

right: 1.2em;

background-color: var(--tertierColor);

}

</style>

<title>WhatsApp</title>

</head>

<body>

<h1 class="logo">WhatsApp</h1>

<div>

</div>

</header>

<a role="button" class="nav active">Chats</a>

<a role="button" class="nav">Status</a>

<a role="button" class="nav">Calls</a>

</nav>

<div>

<h6 class="username">Anurag</h6>

<i class="bi bi-check2-all"></i> Yes, i remembered that! 😄

</p>

</div>

</div>

<div>

<h6 class="username">Cipher</h6>

<p class="recent-chat">Do you wanna hangout?</p>

</div>

</div>

<div>

<h6 class="username">CipherSchools</h6>

<i class="bi bi-check2-all read"></i> Hey bro, time to band!

🥁🎸

</p>

</div>

<small class="recent-chat-time"> Yesterday </small>

</div>

<div>

<h6 class="username">Schools</h6>

<p class="recent-chat">Hey, where are you now? 🙄</p>

</div>

</div>

<div>

<h6 class="username">Anurag CS</h6>

<i class="bi bi-check2-all read"></i> May i borrow your games

for 2 weeks?

</p>

</div>

</div>

</div>

</section>

</body>

</html>

#Programming #Coding #online learning #Online learning platform #css for beginners #Html #Css

23 notes · View notes

inkspinnr · 4 months

Text

Last week I made a little jam game for Minijam 150, the theme was magic and the limitation was 'light is the way.' A pretty abstract limitation for sure ahahaha. We got 1st place! My goal was to play with my toolkit and make something small and complete, from start to finish. Across the projects I've worked on I have pretty good libraries for handling stuff like NPCs, conversations, interactable elements etc. that I wanted to play with.

Scoping out an RPG in 3 days is fun! We started with an outline for the story, magical girl beats up aliens. Combat system came next, that's the gameplay part of the game. You get 3 moves, that cover different areas and solve different problems, which makes the fights into super basic flow charts the player can solve. With 3 moves, we knew we wanted 3 combats and a boss, let's you make a super easy level up system where you upgrade a move after each fight, then fight the boss with your skills. Exploration is rewarded with little health upgrades that give combats a larger margin of error, a neat little package! The game also gave me a great space to work with my new lighting tools and experiment with some practical uses of the color lookup table. On the html build of a love2d project, canvases get compressed and lose color accuracy. But with a color lookup table, I can use a shader to cheat in the proper colors, pretty cool! My favorite part was modding in a secret boss after the jam though, spending a couple laid back days post-jam playing with the legos I made! A harder more complex boss than you should probably put in a jam game, but I had fun ahahaha

#gamedev #game jam #minijam #love2d #inkspun games

3 notes · View notes

sushiwt · 1 year

Text

website update blog #12 (May 22nd, 2022)

hello! i'm back with some actual changes to the site now!

i apologize if the last website update blog was like...

hold on lemme check my tumblr-

wait a minute...

ALMOST 1 MONTH???

damn. well, i got some changes to show yall anyway sooo lets start!

last time i discussed my website, i told yall that i will remake the whole thing over, and THAT, is going to be my main focus.

so i moved the old files to a new folder called /legacy and made a new html file and css file.

i then thought of how im going to go about organizing this thing. i thought about it for an absurdly long time, and then i had an idea.

what if we organized it as such where the style of an html element can be changed just by using the "class" attribute?

its hard to explain so ill just show you what im talking about: (if you dont want to read this part just scroll down until you see the word SKIP HERE!)

ill give you a div element:

but i want to change how it looks, since its just bland text on the preview shown.

that's where these classes come in!

these classes are basically just there to change how any html's look! (with the help of the class attribute)

turning the div into a black rectangle with a shadow

turning the div into a white rectangle with shadow

turning a div into a white rectangle (no shadow needed (although it looks like the rectangle isnt there anymore, but trust me, it still does)

and more! you can do a whole lot with these combinations, and theres even more classes i havent told you yet, like the button and flex classes, but to put it simply, button adds a transition where the rectangle changes color from white to black and and animation that makes the rectangle slightly go up and flex is to arrange the rectangles in rows and columns.

SKIP HERE!

anyway back to the website...

this was the breakthrough idea that made recreating the website SO MUCH EASIER.

aaand after only 10 days, i finally finished!

i will now explain the changes i have made with the website (compared to my website before i recreated it)! it should be obvious but i will do it anyway.

- i added a github button!

this button serves two purposes:

its a button to redirect you to the github repository of the website!

its to get the /section buttons to actually look like they are centered. the main problem of the old navbar was that it did not look centered AT ALL, so i couldnt really center the thing without looking off and weird...

and now, with the github button, everything looks decent!

- changed the footer to look like a simple (rounded) rectangle at the bottom of the page.

this was to "solve" the problem which i had with the footer thingy which was that:

if i wanted the footer to fix on the bottom of the textbox,

but when i zoom out theres so much visibe dead space at the bottom.

and another thing, if i want the footer to stay at the bottom of the screen, it doesnt look like theres dead space, buttttt

the damn footer takes up 10% of the total screen space

so i had an idea...

what if we just contain it in a small rectangle instead of looking like the navbar?

it clearly does not solve the dead space at the bottom problem, but atleast it looks nicer than before and it doesnt look like the navbar anymore :D

oh and also

- I FINALLY FINISHED THE SLOOSHI PHOTO IN THE SIDE OF THE TEXTBOX AFTER LIKE 1 MONTH

YOU CAN SEE THE CHARACTER ON THE IMAGE I JUST SHOWED YOU IF YOU HAVENT NOTICED YET

THIS SHIT TOOK ME SO LONG TO ADD ARMATURES AND POSES AND I FINALLY FINISHED ITHBHRDJ FNJKCKXLM<

i just hope yall like it :>

aaaaaaand thats all that i have changed while recreating the thingy!!!

now the new stuff (theres only one):

- I added a new section on my website called sushiwt/lite!

based on @pagerorgy's sc36.net (and by based i mean i downloaded the html file of the website and edited it), this WAS a temporary home while i was remaking it, but now its just a place where you can see EVERYTHING the site has to offer (in only 1 table)!

i apologize of the fact that this blog is so long, so heres a tl;dr

i remade the website with a convenient way to change the look of an element

i changed the footer's look, added big slooshi, and

added sushiwt/lite, everything in my site in one table

ok goobai :D

- sushiwt <3

#web de #web design #html #css #this shit took 3 days to type holy fuck

7 notes · View notes

izicodes · 1 year

Note

Hii ! I’m in a bit of a problem rn and I’m wondering if you could help ( sorry for bothering you )

So school just finished and I’m on vacation for like 3 months so I really want to learn how to code ( I mainly want to make cool websites and stuff ). So I started to learn html and css but it just seems so overwhelming especially seeing all the ressources and tutorials online, could you please help me know what to learn first ? 💖

Hiya! 💗

Yeah, I can help! It can be overwhelming at first, but it's best to break it down into chunks and tackle them bit by bit.

For now, as a complete beginner, use these 3 resources:

HTML and CSS course video - LINK

W3School (for extra help) - HTML LINK | CSS LINK

MDN (for even extra help) - HTML LINK | CSS LINK

After that, work on projects to test your knowledge:

List of 11 projects to tackle - LINK

Here is the list of things you want to cover in HTML:

Basic structure

Tags and elements

Attributes

Forms

Semantic markup

Tables

The same but for CSS:

Selectors

Box model (margin, padding, border)

Typography (fonts, text properties)

Colours and backgrounds

Layout and positioning (floats, flexbox, grid)

Responsive design (media queries)

Transitions and animations

Now that you have a list of what you need to cover, tackle them one by one, making sure you understand the topic before you head over to the next. The video tutorial covers all of this and more. If you don't understand a bit in the video, stop and look on W3School and MDN for further understanding and then continue on with the video. Also, tackle the video slowing. Don't rush, don't do it, it'll just make the learning process even longer if you getting not understand things.

The resources I listed are my complete go-to. After that, as you've noticed, there are hundreds more. Go through the ones you need for the specific project you're working on or the topic you're studying only.

Hope this helps and good luck! 💻💗

#reources #coding #codeblr #programming #progblr #studying #studyblr #comp sci #tech #html #css #html css #coding resources

99 notes · View notes

kafus · 1 year

Text

ramble incoming about indie websites, neocities, and modern web design... putting below a read more because i wrote way more than i thought i would, oops.

whenever i see posts going around about how imaginative and creative old web design used to be, and how minimalist and same-y everything is now, while i do agree and wish that modern web design was more interesting and more dense with information... it's not as simple as "let's go back to how it used to be."

most old websites did not conform to modern accessibility standards, making the internet harder to use for many people, and on top of that we live in a smartphone era now where websites have to be designed in such a way that they work on both phones and computers... phones have a much smaller space to work with - kind of hard to decorate your website in pretty graphics and lay out the information in unique ways when you're designing for tiny screens in portrait resolutions!

i work pretty hard to make sure CPG displays on both mobile devices and computer monitors in at least decent fashion, and the website is absolutely less interesting looking on mobile. the sidebars are traded in for a toggle-able menu at the top of the screen (i'm considering changing it to a button that sticks to the bottom of the screen so you can open the menu without scrolling up, but i digress) and images that would float on the right or left side of articles in an aesthetically pleasing way have to be put into their own blocks between passages of text so that the text doesn't become impossible to read, squished on the sides. i'm not perfect at accessibility, nor am i perfect at optimizing the site for mobile, but i think i do an okay job with my relatively simple layout. i do this because i want my website to be viewable to people on any device, even people who aren't enthusiastic about the indie web, or desktop browsing. this would not be nearly as easy with some of the complex table layouts of the past.

it is interesting to me that a lot of people choose to simply not make their website usable on mobile and will put a notification that the site is either best viewed on desktop or doesn't work on mobile at all on the front page... there is nothing wrong with this, mind you, i'm not making a judgement of the person or their coding abilities, some people are just chilling and doing their hobbyist thing without fretting about that, or making their content for a specific audience that would mostly view from their computers, which is fine! how other people make and run their websites is none of my business. but i do think a lot could be gained from exploring mobile design and making the indie web space more accessible to mobile users, which take up a large percentage of the population. we'd probably have more eyes on us if our spaces were more accessible for people on phones. also, personally, i actually find making my site compatible for mobile with pure vanilla html/css/js a fun challenge.

at the very least, even if a website isn't built to be mobile-friendly, making sure everything is at least visible and clickable is a good thing. my website dynamically changes the size of elements based on the device viewing it, but there is also the option of making your entire website layout a set pixel width, so that it is the same on every device, people just might have to scroll horizontally or zoom in to see/click things... which is annoying but at the very least workable. i have seen some high quality neocities sites that do exactly this and i think it's a good alternative from dynamically sizing pages.

all this being said, i'm coming from the perspective of someone who actually wants their website to be seen and be used by as many people as possible because i'm providing niche game guides/tools/resources, so again, people who are just doing their hobbyist thing probably don't care as much about how many people see their site, especially outside of indie web spaces and especially neocities. it's a bit of an insular community where everyone on there is exploring their fellow users' desktop websites. also, just because a website is not workable on mobile doesn't mean people won't see it! plenty of people still use their computers to browse the web of course, it just cuts out some parts of the population. it's complicated and i'm not an expert on the subject but i don't know, i just felt like talking about it ww

TLDR; i think the ideal would be for a less corporate, more creative internet that still is accessible for disabled people and still allows the use of smartphone browsing. maybe one day when i'm more educated on code, i can make some cooler things in this regard...

#ayano.txt #ayano was here #i feel weird talking this much but i don't really have anywhere else to put these thoughts

10 notes · View notes

hindintech · 7 months

Text

You can learn HTML easily, Here's all you need to get started:

1. Document Structure

• <!DOCTYPE>

• <html>

• <head>

• <title>

• <meta>

• <link>

• <script>

• <noscript>

• <base>

2. Text Content

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

• <p>

• <span>

• <strong>

• <em>

• <br>

• <hr>

• <!-- Comment text here -- >

3. Lists

• <ul>

• <ol>

• <li>

• <dl>

• <dt>

• <dd>

4. Links and Navigation

• <a>

• <nav>

• <link>

5. Embedded Content

• <img>

• <audio>

• <video>

• <iframe>

• <canvas>

• <svg>

• <map>

• <area>

6. Forms

• <form>

• <input>

• <textarea>

• <button>

• <select>

• <option>

• <label>

• <fieldset>

• <legend>

• <datalist>

• <output>

7. Tables

• <table>

• <tr>

• <th>

• <td>

• <caption>

8. Semantic Elements

• <article>

• <section>

• <header>

• <footer>

• <aside>

• <main>

• <figure>

• <figcaption>

• <mark>

• <progress>

• <time>

• <details>

• <summary>

9. Deprecated Elements (Avoid Using)

• <center>

• <font>

• <strike>

#learn to code #codeblr #code #progblr #html css #webdevelopment #programming #coding #html

2 notes · View notes

cloudycodes · 1 year

Text

html tables

i was on twt the other day and ppl were all talking about how much they do not enjoy html tables LOL but lemme take a shot at it rq

apparently people used to use the table element for layouts before css layouts came to be, but this is bad bad bad now because

the accessibility for visually impaired users is lower. screen readers cannot interpret the tags and are more complex than css, so it causes confusion

more complex markup = harder to write, maintain, debug

unresponsive and require extra styling to effectively work between devices

i went through the mdn tutorial and finished their final assessment on creating a table on planet data. the assessment is here if you wanna try. i don’t wanna post my full code but here is basically all i needed to know when creating the table.

here are the table attributes i learned

<table></table>: creates a table <caption></caption>: the title of the table <th>..</th>: table header <tr>..<tr>: table row <td>..<td>: table data cell <rowspan =""><colspan ="">: specifies the number of columns/rows a cell should span for example, if one <td> takes up two columns, it’d become <td colspan=”2”> <colgroup><col>..<colgroup>: defines a group of columns within a table <th scope="col | row | colgroup | rowgroup">: takes the value to determine whether a header cell is a header for a column, row, or group of columns or rows

final tldr review questions

what is a table? data in the form of tables and columns

why is it a bad idea to use html tables for page layout? reduces accessibility for visually impaired users, lack a logical layout for a page, and are not responsive

what are caption elements useful for? i called it a title for the table earlier, but it is also helpful for screen readers to get a general idea of the contents of the table before having their screen reader render the whole thing

what is the scope attribute? the scope attribute specifies what the header cell is used for, taking values row/col/rowgroup/colgroup. they make no visual difference, but it helps screen readers detect the header’s purpose.

that's really it they're like a bit irritating to make ngl but not to difficult?? just tedious

#code #html #css #coding #cs #codeblr #studyblr #codenewbie #cloudylogs code

9 notes · View notes

mmainulhasan · 11 months

Text

Prompt Examples for Learning Web Development

Coding is both an art and a science. It’s about creatively solving problems, bringing ideas to life, and constantly learning and adapting.

Because technology advances at such a rapid pace, it is essential to be fluent in a variety of languages, tools, and domains.

Sometimes it’s difficult to pick up the right resources from the ocean of tutorials, demos, and resources.

And on top of that, sometimes we have to learn and apply so fast due to tight deadlines of the projects. In this case, we need a friend who can help us learn and work faster and better. And thanks to AI by this, our learning becomes faster and more fun.

Today, we’ll look at how learning prompts that AI drives can change the way you learn web development.

How you can craft prompt engineering for web development, the difference between a generic prompt and a bit tweaked prompt can eventually change your desired results and make your learning journey more smooth and more enjoyable.

You can also use this knowledge to learn other fields more quickly and interactively.

Table of Contents

Learning Prompts

HTML Prompt Examples

CSS Prompt Examples

Debugging Prompts

Testing Prompts

Crafting Better Prompts