Lilith Stargaze how to code 2/18/25


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Lilith Stargaze 2/18/25 9 am @ 100 %</title>
<!-- preliminary stuff that doesn't affect the outputted profile, but keeps it official
 and helps. doctype shows this is an html guided thing. html lang confirms to the machines its reading in english. head just says this is header stuff. title is handy for the coder to
 keep track of if you have other codes. I like to add date and time of latest edit, and 100% is the browser's zoom I'm using to help keep things lined up. I could add aspect ratio and
 size of my monitor. Followed by close title. The style that follows this is very important though. It opens the CASCADE STYLE SHEET, CSS. Where the above is important to make the
 code official and helps the pc machines involved, it's not critical to make your code work. But opening the style sheet is.-->
 <style> {<!--opens css section very important. codes in this section are placed between { and } including these explainers--!>}

  body {width:99vw;height:1vh;background:#66f;overflow:hidden;} {<!--the body defines the background. just giving it size and color is simple, but there are other cool things that can be done--!>}
 .phot {position:absolute;top:75px;left:40vw;width:20%;box-shadow:3px 4px 1px #113;} {<!--This definition will be used in the photo to define some things about it. where, how wide, that shadow-->}
 .text1 {font-family:arial black, times;font-size:27px;color:lavender;margin-top:20px;text-align:center;text-shadow:2px 2px 1px #113;} {<!--this defines your main text-->}
 h1 {font-family:arial;font-size:25px;color:#11d;margin:410px 200px 0 200px;text-align:center;text-shadow:.5px .7px 1px #311;} {<!--notice this one doesn't have a . before it. That means it's a simple tag. h tags are to modify text. Used so that bunches of text definitions can be reduced to one or a few. There are other reasons, but for now this is good.-->}
 </style> <!--This closes the CSS section. It automatically opens the html section if things have been done right-->
 <img src= "https://i.postimg.cc/28VdNf5t/154087.png" alt="Angel girl" class="phot"> <!--this places your image. the src defines which image(The url), the alt is for something to come to the page if the image url is broken. CSS3/html5 requires it, but it'll work without it until the code gods say otherwise. the class "phot" is what you defined above, and you're using the abbreviation.-->
 <div class="text1"> Lilith Sunlight Stargaze<br> <!--Here you are using the main text as you defined in the CSS above-->
 <h1> An angel who believes she is wonderful spectacular and is a beloved example of goodness to others. She cares greatly about being popular and important and admires beauty. </h1><!--this h1 is the tag you defined in the css. If your code were to be switching different texts, this tag would save a lot of typing for different text kinds, that might be similar or very different. Used here, it's a good to learn thing a lot of folks miss. I used the tags wrong for a couple  years. Might still be getting some things not right. There is a p tag and a span tag. I mostly use div instead of span unless there are more than one texts to use at the same position. Not a thing to worry about yet.</div><!--at the end almost always will be a close div. COUNTING DIVS is done to make sure all divs are closed. And the other tag types you have used such as h1 or span, or ul, or, importantly soon enough you'll learn, table and td tags-->

<!--The above things I mentioned are mostly about the css3/html5 FORMAT. Most of the older formats still work and folks still use them. When I see the old xhtml format being used I know I'm looking at a code style used a long time ago. The newer formats can do more things, and are actually simpler. They can code for a big webpage using fewer lines of code while doings like hover, spin, scroll across, and other magical seeming things like an object that suddenly  spins off the page.