HTML Video element | MTA Web Design Fundamentals | Cardiff Met

video 요소를 사용하여 웹 페이지에 비디오 클립을 추가 할 수 있습니다 추가하자

우리 페이지에 카디프 성의 비디오 먼저 동영상 요소를 추가하고 동영상의 높이를 지정하십시오 다음으로 소스 요소를 추가해야합니다 video 태그를 지정하고 SRC 속성을 사용하여 비디오 파일의 위치를 ​​지정하십시오 이 경우에는 비디오 폴더에 있으며 카디프 – 성 – 시간 경과라고합니다 우리는 또한 어떤 종류의 파일이 비디오인지 브라우저에 알려야합니다 type 속성을 사용하여 type을 video / mp4로 설정합니다

너는 할 수있다 경우에 따라 백업을 제공 할 수있는 여러 소스 파일 지정 웹 브라우저는 특정 형식을 지원하지 않습니다 다른 소스를 추가합시다 QuickTime 형식의 mov 형식입니다

그러면 동영상을 재생할 수 있지만 재생 제어 기능이 없으면 쉽게 사용할 수 있습니다 동영상 태그에 'controls'속성을 추가하여 추가했습니다 우리는 비디오에 포함될 필요가있는이 속성 값을 제공하십시오 꼬리표 마지막으로 동영상의 콘텐츠가 음성 인 경우 폐쇄 자막 또는 자막을 사용하면 청각 장애인 또는 장애인 비디오를 듣는 것이 어려워요

"track"요소를 사용하여 소스 (src) 속성을 사용하는 트랙 파일의 위치 이 경우 닫힌 캡션 인 파일의 종류를 지정하고, 다른 파일 텍스트 트랙의 일반적인 종류는 부제입니다 track 요소에는 몇 가지 추가 속성 : 우리가 설정할 소스 언어 (srclang) 영어 (en)와 그 언어의 레이블 – 영어 다음을 포함 할 수 있습니다 필요한 경우 각 비디오에 대한 여러 트랙 저것을 보자

비디오 실전

iframe element HTML | MTA Web Design Fundamentals | Cardiff Met

iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용할 수 있습니다 여기 우리는 카디프 페이지의 주요 역사에서 카디프 성곽 페이지에 표시 iframe 태그에는 URL을 지정하는 소스 속성 SRC가 포함되어야합니다

임베디드 될 웹 페이지 페이지의 높이와 너비는 다음을 사용하여 설정할 수 있습니다 높이 및 너비 특성을 보여주기 위해이 iframe의 크기를 늘려 보겠습니다 더 많은 콘텐츠 높이를 800 픽셀로 설정하고 너비를 1000 픽셀

접근성을 위해 iframe의 제목도 설정해야합니다 원인 iframe은 프로그래밍 방식으로 변경할 수 있기 때문에 유용합니다 이 과정에서 다루지 않으며 MTA 시험에 포함되지 않는 JavaScript 또한 YouTube 동영상 및지도와 같은 콘텐츠를 퍼가기 위해 자주 사용됩니다

카디프의 위치를 ​​보여주는 Google지도를 삽입하겠습니다 먼저 우리는 Google지도에서 '지도 공유 또는 삽입'을 포함시킬 수있는 옵션과 퍼가려면 웹 페이지에 복사 할 수있는 코드가 있습니다 코드는 "iframe"으로 시작하므로 해당 코드를 복사하여에 붙여 넣으면 우리 페이지

Basic HTML for Web Design : Definition Lists & Indenting Text in HTML

이제 총알 목록이나 번호 목록을 원하지 않으면 정의도 있습니다 명부

그리고, 정말로 그것은 텍스트를 들여 씁니다 그리고 그렇게하기 위해 우리는 우리의 페이지를 우리 목록에 추가하고 UL 또는 OL 대신 DL을 넣을 것입니다 그리고 그 약자 정의 목록 그리고 마지막 괄호에서 우리는 그것을 D로 바꿀 것입니다 그리고, 이 목록을 사용하면 목록의 제목을 가질 수도 있습니다

그리고 우리는 제목이 DT이고 목록의 제목을 입력합니다 그리고 우리는 우리의 모든 목록 항목을 가지고 있습니다 나는이 링크를 없애고 더 멋지게 보이도록 할 것입니다 그래서 우리는 그 우리는 여기에 가서 우리의 링크를 새로 고칩니다

그리고 총알이 나타납니다 오, 그거야 이는 목록 항목이 아니기 때문입니다 이것들은 DD입니다 그래서 나는 이것들을 꺼내어 타이프해야한다

DD 이제, 우리는 그것을 저장하고 여기로 돌아갑니다 이제는 들여 쓰기가 된 것입니다 보금 자리를 유지하고 그 일을 계속하십시오 단지 목록 자체를 정의합니다

UI/UX디자인 채널을 시작하게 된 계기 Introduction to JOOD's UI/UX design channel (With sub)

Hello, Nice to meet you guys I have just done my laundry and sweat a lot now

This is my first youtube video I'm little nervous now I have always wanted to start a youtube blog about UI/UX design since I started living in the US Recently, I have been working on the side project with another UX designer who lives in Utah

We had a conversation about the designer career From the conversation, I knew many folks in Korea are interested in UI/UX design However, I found that they are struggling to access information and resources about it I decided to share the UI/UX design information and resources that I have learned and refined in the US

with those in Korea to help them choose and develop their design careers Thereby, this channel has been started Introducing myself, I go by Joo It derived from my Korean name, Jooyoung Joung I'm currently working as a product designer at Wondersauce (Design Agency)

I have been working within a variety of clients, such as Chick-Fil-A, Loreal Lancome, Scotts and Huntington Bank My main role is to create design interfaces, visual content, and build maintain design system libraries From now on, I would like to share not only the UI/UX resources But also my point of view as foreigner about living in the US and my career transition from non-designer to designer

and some tips for UI/UX design career development I look forward to seeing you with good contents soon Thank you See you guys again!

Basic HTML class 2,web design tutorial class -2, HM oxygen,

Assalamu Alaikum bhai 어떻게 지내세요? 희망은 html이다 기본 농업 대출 클래스 2 요소 및 속성에 대한 내용 SM Mazharul 이슬람교 비디오가 훌륭해지기를 바랍니다

만약 당신이 그것을 좋아한다면, 구독하십시오 하나는 다음 동영상을 얻기위한 것입니다 인접한 벨 아이콘을 클릭하십시오 숫자를 늘리는 대신 yuit가 무엇인지 HTML 요소와 속성을 살펴 보겠습니다

HTML meta element | MTA Web Design Fundamentals | Cardiff Met

meta 요소는 웹 페이지에 대한 추가 메타 데이터를 제공하는 데 사용됩니다 head 요소에 포함될 수있는 다양한 메타 태그 요소가 있습니다

가장 보편적 인 부분을 살펴 보겠습니다 charset 속성 웹 페이지 문자 집합을 지정합니다 사용할 페이지에서 사용할 수 있습니다 "utf-8"은 다음을 포함하는 범용 문자 집합입니다 거의 모든 문자와 세계의 상징

그래서 대부분 웹 페이지에서 메타 태그의 문자 세트 속성을 utf-8로 설정하면 head 요소에는 여러 개의 meta 요소가 포함될 수 있으므로 일반적인 것들 작성자와 설명은 "이름"과 "내용"을 사용하여 지정됩니다 속성 "name"은 메타 요소의 유형을 지정하고 "content"는 메타 요소의 유형을 지정합니다 실제 메타 콘텐츠

그래서 저자의 세부 사항을 추가하기 위해 메타 요소를 추가 할 수 있습니다 저자의 이름과 내용 우리는 Joe Train의 저자명을 씁니다 이 경우 설명을 추가합시다 이름 속성이 설명과 동일하고 content 속성의 값을 지정하여 페이지 설명 일반적인 meta 요소의 또 다른 예는 뷰포트입니다 뷰포트 속성은 웹 브라우저 어떻게 다른 장치에 페이지를 표시 할 수 있습니다

우리는 탐구 할 것이다 나중에 코스의 뷰포트 옵션을 선택합니다 이제는 공통 설정을 지정하겠습니다 너비는 장치 너비와 같습니다 페이지 너비를 장치의 너비와 같게 설정하고 초기 배율은 페이지의 초기 배율을 설정하는 1

0과 같습니다 마지막으로 keywords 속성을 사용하여 웹 페이지의 키워드를 나열 할 수 있습니다 Google과 같은 검색 엔진에서 사용하는 데 사용되는 keywords 속성 귀하의 웹 사이트 순위를 매기는데 그들은 더 정교한 방법에 의존합니다

HTML Tutorial: From Web Design Prototype to HTML

이봐, 난 스킬 라이프에서 온 헌터 야이 두 번째 수업에 오신 걸 환영한다

4 부분으로 구성된 과정으로 비디오 채널 랜딩 페이지를 디자인하고 코딩 할 수 있습니다 에서 이 단원에서는 1 단원의 디자인 용 HTML을 작성합니다 이제 3 단원에서 CSS를 작성해 보겠습니다 설명에서이 과정을 위해 연결된 수업 계속 따라 가라

우리가 가서 코드를 작성하되 마지막 코드를 다운로드하고 디자인 할 수도 있습니다 skillthrivecom에 작은 가격 이것은 창조주로서 계속해서 나를 돕습니다 무료로 시청할 수있는 디자인 및 개발 과정을 제공합니다 그것으로 방해가되지 않도록 시작하십시오

좋아, 이제 우리는 디자인을 마쳤다 Figma, 앞으로 들어가서 실제로 HTML을 작성하기 시작하자 실제 비디오 채널 자, 우리가 언급하기를 원하는 것은 시작하는 것은 내가 사용하고있는 코드 편집기이며, 그 코드 편집기는 Visual 스튜디오 코드 이제 제가 제안하는 이유는 몇 가지 확장 기능을 설치하고 싶다면, 그리고 뭔가를 사용하고 있다면 그 확장 기능에 동일한 액세스 권한이 없을 수도 있습니다

지금, 만약 당신이 다른 것에 익숙하고 그것을 사용하고 싶다면, 언제든지 사용하십시오 그것 너와 함께하고 싶을 때를 대비해서 여기에 뭔가 있는거야 정확하게 그래서, 여기 code

visualstudiocom에서 다운로드 한 후, 가자 앞으로 Visual Studio 코드를여십시오 일단로드되면 여기로 내려와 이 아이콘으로 실제로 확장 프로그램을 설치할 수 있습니다 그만큼 먼저 설치하고자하는 것은 Live Server입니다

그래서, 그것은 첫 번째 것이 될 것입니다 여기, 이것을 클릭하겠습니다 440 만 명의 사람들이 그것을 다운로드하고 5 별, 그래서 당신은 그것이 정말 인기가 말할 수 있습니다 그만큼 정말 인기가있는 이유는 코드에서 변경을 할 수 있다는 것입니다 그것이 HTML이든 CSS이든 관계없이 브라우저

본질적으로 그것이하는 일은 단지 호스팅 된 웹 사이트처럼 만듭니다 컴퓨터에서 볼 수 있습니다 그런 다음, 그렇게하면, 일단 저장하면 파일은 자동으로 새로 고쳐지기 때문에 그 파일을 볼 수 있습니다 지금, 과거에 나는 지나갔고 실제로 갔다 사이트를 손으로

그리고 짜증나는 이유 중 하나는 단지 당신이 변경 사항을보고 싶을 때마다해야하지만, 이것을보고 학습하고 있으며 내가 쓰는 것을 이해하려고 노력하고 있습니다 그것이 실제로하고있는 것, 그것은 당신이 그 점들을 약간 연결시키는 것을 도울 것입니다 보다 나은 이제는 확장 기능을 설치 했으므로 다음 번에 설치해야합니다 HTML5를 사용하고 싶습니다

실례합니다 HTML 상용구 그리고 나는 그것을 여기에서 보지 않는다 그래서 보자, HTML 철자가 틀렸다 그래서 상용구 자 간다 그리고 이건 'HTML'과 같이 입력 할 수있게하려면 아래로 내려 가서 Boilerplate, 그리고 그것은 당신을 위해 상용구 코드를 뱉어 낼 것입니다

자, 너 Boilerplate 코드가 무엇인지 모릅니다 본질적으로 코드는 계속해서 다시 쓰고 싶다 그래서, 다시 작성하는 대신 그리고 다시 한번, 여러분은 시작 코드로 시작하고, 몇 가지를 변경하고, 제목과 설명을 작성한 다음 실제로 코드를 작성하기 시작합니다 그럼, 가라 앞서 이것을 사용하고 있기 때문에 미리 설치하고 설치하십시오

그럼 우리는 실제로 여기에 새 프로젝트를 만듭니다 그래서 나는 내 삶에 들어갈거야 파인더 나는 바탕 화면에 와서 새 폴더를 만들거야, 그냥 그 폴더를 '비디오 채널'이라고 부릅니다 그런 다음이 폴더를 잡고 끌 수 있습니다

Visual Studio 코드에 아이콘을 추가하면 해당 프로젝트가 열립니다 우리를 위해 저는 앞으로 나아가서 이것을 화면 왼쪽으로 이동 한 다음 브라우저를 오른쪽으로 이동하십시오 그래서, 여기, 이것 아래 폴더에서 새 파일을 만들 수 있습니다 그래서 저는 'index

html'을 할 것입니다 우리 홈 페이지가 될거야 그런 다음 'stylecss'를 만들겠습니다 그것은 우리 스타일을 잡을 예정이다

그런 다음 HTML로 돌아가서 'HTML'을 입력하겠습니다 와! HTML, 여기에 HTML5가 있음을 알 수 있습니다 상용구 나는 이것을 클릭하여 그 상용구 코드를 뱉어 낼 수있다 그때 나는 와서 몇 가지를 바꿀 수 있습니다

제목을 '동영상'으로 변경해 보겠습니다 채널 ', 그리고 설명을 위해 이것을'내 멋진 비디오 '로 변경할 수 있습니다 채널' 그러면 우리는 계속해서 스타일을 도입 할 수 있습니다 'style

css' 승인 그때 이 코멘트를 제거하십시오 이제 우리는 이것을 가지고 있습니다 이 HTML 파일에 들어가서 마우스 오른쪽 버튼을 클릭하고 Open With Live Server라고 말하면 이 새 탭이 열립니다

지금 아무 것도 보이지 않지만 우리가 들어 오면 그냥 'Hello World'라는 h1을 여기에 추가 한 다음 저장하면됩니다 브라우저에 자동으로 반영됩니다 멋지다 그래서 우리는 필요 없다 'Hello World'그리고 우리는이 스크립트 태그도 원하지 않습니다

그리고 내가 할 일은 그냥 래퍼를 끌어 와서 래퍼를 만들려면 'div class = "wrapper"'라고 해보자 먼저 큰 따옴표를 사용하겠습니다 그리고 나서 나는 여기에 댓글을 달아주세요이 댓글은 단지 이것이 헤더가 시작되므로 '헤더' 그런 다음 새 섹션을 만들 수 있습니다

이 섹션에서는 'top_section'을 호출 할 수 있습니다 그런 다음 '헤더'를 만들 수 있습니다 이 머리글에 나는 h1을 원하고 원하는 제목을 넣을 수 있습니다 우리는 'Your Channel Title'을 할 것입니다 그런 다음 Lorem Ipsum 중 일부와 함께 P 태그를 수행 할 수 있습니다

그리고 난 그냥 갈거야 이 Lorem Ipsum을 복사하여 여기의 코드 편집기로 돌아와 그런 다음 P 태그 아래에 버튼을 붙이면됩니다 버튼을 클릭하면 '지금보기'가됩니다 계속해서 저장하십시오 좋아, 이제 우리는 우리의 브라우저에서 그것들을 볼 수 있습니다

그런 다음이 섹션에서 이것은 머리글 자, 이제 그 부분을 주석으로 처리해 봅시다 헤더 섹션 다음으로 내가하고 싶은 것은 여기에 또 다른 설명을 작성하는 것입니다 이는 콘텐츠가 어디로 갈 것인지를 보여줄 것입니다

실제로 시작 내가 여기서하고 싶은 첫 번째 일은 다른 섹션을 만들고 이것을 'class = "content_section"'이라고 지정하십시오 그리고 이것에 대해서, 나는 첫 번째 재생 목록을 만들고 싶습니다 그리고 그 재생 목록에, 나는 h4 태그를 원하고,이 h4 태그는 가고 있습니다 우리의 재생 목록 제목이되도록 'class = "playlist_title"'을 지정합니다

과 h4에서는 "섹션 제목"만 말할 수 있습니다 좋아요, 그래서 우리는 브라우저 다음으로 우리가하고 싶은 일은 모든 것을위한 div를 만드는 것입니다 동영상 따라서, 이것은 'div class = "videos"'가 될 것입니다

실제로 개인과 마찬가지로 실제 동영상으로 이동하기 전에 비디오, 실제로 가서 내가 피그모로부터 수출 한 이미지를 가져와 봅시다 그래서 저는 여기서 Finder로 들어갈 것입니다 그리고 여기 내 실제, 내 이미지 아르 그리고 여기에 내 프로젝트가있는 보드가 있습니다 그래서이 폴더를 복사하려고합니다

여기, 내 모든 이미지와 함께, 내 프로젝트가있는 바탕 화면에 와서 붙여 넣으십시오 바로 여기에서 이미지를 볼 수 있습니다 비디오 채널 이제 우리가 할 수있는 일은 여기에 새로운 div를 만들 수 있다는 것입니다 그래서 나는 'div class = "video"'할 것입니다

그럼 인라인으로 할거야 스타일링, 배경 이미지를 가져 오거나 적어도 배경 이미지를 설정하려면 "배경 이미지" URL을 설정합니다 URL은 이제 막 나옵니다 이미지가있는 위치가됩니다

그래서, 그것은 'images / image-1'이 될 것입니다 다음 JPG 그래서 이것은 단지 파일 이름 일뿐입니다 그러면 우리는 그것을 닫아라 다음으로하고 싶은 일은 실제로 글꼴 굉장 아이콘을 사용하는 것입니다

이제 그 일을하기 위해, 우리는 우리가 Font Awesome 라이브러리를 가져옵니다 그리고 그렇게하기 위해서 Font로 향해야합니다 굉장한 웹 사이트 그리고 실제 홈페이지를 방문하면 이 행동 유도 전화는 무료로 사용하기 시작합니다 그럼 네가 가지고 있는지 확인하고 싶어

Free를 선택한 다음, 그냥이 모든 것을 복사하십시오 다시 여기로 오십시오 그리고 여기, 실제 스타일 시트라고 부르는 스타일 아래에서 붙여 넣기 만하면됩니다 이제 HTML에서 Font Awesome을 사용할 수 있습니다 이제, 실제와 같은 것을 찾으십시오

전화를 걸기 위해 전화를해야합니다 아이콘을 검색하십시오 그래서 우리는 놀이 동그라미를 할 것입니다 여기에서 볼 수 있습니다 iHTML을 사용하십시오

아이콘 HTML을 사용하면 실제로 사용할 수 있습니다 계획 따라서 여기를 클릭하여 복사 한 다음 붙여 넣기 만하면됩니다 이리 멋지다

일단 우리가 그랬다면이 비디오를 일곱 개 더 복사 할 것이다 타임스 그래서이 비디오에서 바로이 div를 복사하고 이것을 복사 할 것입니다 그것을 7 번 붙여 넣으십시오 그리고 이것은 개별 비디오 또는 첫 번째 재생 목록에 대한 8 개의 개별 동영상 그럼 내가 들어올거야

여기에서 번호를 변경하십시오 좋습니다 한 번 말하면 이미지의 일부를 실제로 볼 수 있습니다 잡아 당기는 일종의, 그들은 무서워 보인다 그러나 우리는 스타일에서 그것을 고칠 것이다

그리고 지금 우리가하고 싶은 일은 계속해서 Playlist 2 섹션을 만드는 것입니다 그럼,하자 이 재생 목록에 올거라 1 div 여기에서 볼 수 있습니다

그것의 끝, 그리고 우리는 그냥 가서 복사하고 아래에 붙여 넣을 수 있습니다 이 하나 이 항목을 '재생 목록 2'로 변경하겠습니다 그리고 우리는 또한 변화시킬 필요가 있습니다 원하는 경우 제목, 그리고 9시에 시작하려면이 제목을 변경해야합니다

16까지 올라가 좋습니다 근본적으로 우리가해야 할 모든 것입니다 나는 그냥 가보고 싶다 그리고 그것은 단지 좋은 측정을위한 것입니다, 저는 여기서 주목할 것입니다

그래서 메모를 작성하십시오 '이것은 콘텐츠 섹션의 끝'입니다 계속해서 여기에 유의하십시오 이것은 래퍼의 끝입니다 그래서, 일단 우리가 말하면, 당신은 당신이 당신의 두 섹션에서 우리는 헤더를 가지고 있으며, 기본적으로 모든 것이 될 것입니다

여기까지, HTML까지 그리고 우리는이 모양을 정말 멋지게 만들 것입니다 다음 비디오에서는 CSS를 실제로 작성하려고합니다 그래서, 그걸로 CSS를 작성하고 시작하자